angularjs在ng-repeat中使用ng-model遇到的问题


Posted in Javascript onJanuary 21, 2016

在ng-repeat中使用ng-model时会有许多问题,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变。上面的问题我在开发时也遇到过,但是解决后我却怎么也还原不了那种情况了,只能先简单介绍一下无法获取的情景该如何解决。

例如:

html:

<body>
<div ng-controller="selectController">
  <div ng-repeat="pop in citylist">
    <select ng-model="p">
      <option value="" style="display:none;">{{pop.pop}}</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
    </select>
    <button ng-click="cs()">ceshi</button>
  </div>
</div>
</body>

js:

<script>
  var app = angular.module('app', []);
  app.controller('selectController', function ($scope) {
    $scope.citylist=[{id:1,pop:"北京"},{id:1,pop:"上海"},{id:1,pop:"广州"}];
    $scope.cs=function(){
      console.log($scope.p);
    }
  })
</script>

很简单的功能,想要在点击更改按钮时获取select当前选中的数据内容,但是你会发现这样写只能得到undefined,此时有的人会提出可以将p赋予成为一个对象,通过key:value的方式来保存每一次的选择

$scope.p={};

这样确实没问题,但是会有一个新的问题那就是只要改动了一项,那么所有的内容都会跟着一起改变,那么有没有更好的方法呢?

只要一个小小的改动

html:

<button ng-click="cs(p)">ceshi</button>

js:

$scope.cs=function(p){
      console.log(p);
    }

这只是个简单的例子,如大家在实际使用时发现有别的问题也可以在评论中留言。

Javascript 相关文章推荐
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
12 种使用Vue 的最佳做法
Mar 30 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
js实现的二分查找算法实例
Jan 21 #Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 #Javascript
angularjs表格分页功能详解
Jan 21 #Javascript
使用angularjs创建简单表格
Jan 21 #Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 #Javascript
Javascript中神奇的this
Jan 20 #Javascript
javascript实现图片轮播效果
Jan 20 #Javascript
You might like
php&amp;mysql 日期操作小记
2012/02/27 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
跟老齐学Python之print详解
2014/09/28 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
Python实现定时任务
2017/02/08 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
Python合并多个Excel数据的方法
2018/07/16 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
班级文化建设标语
2014/06/23 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
临时租车协议范本
2014/09/23 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
毕业实习证明范本
2015/06/16 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
Python中os模块的简单使用及重命名操作
2021/04/17 Python
利用python调用摄像头的实例分析
2021/06/07 Python
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL