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 学习笔记二 字符串拼接
Mar 28 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
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第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
Python函数中定义参数的四种方式
2014/11/30 Python
简单谈谈Python中的闭包
2016/11/30 Python
详解Python3注释知识点
2019/02/19 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
护士毕业生自我鉴定
2014/02/08 职场文书
安全保证书范文
2014/04/29 职场文书
思想作风建设心得体会
2014/10/22 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android