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 相关文章推荐
一个用js实现的页内搜索代码
May 23 Javascript
Aptana调试javascript图解教程
Nov 30 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
javascript hasFocus使用实例
Jun 29 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 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 反向排序和随机排序代码
2010/06/30 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
JavaScript中的私有成员
2006/09/18 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
python通过文件头判断文件类型
2015/10/30 Python
Python中标准模块importlib详解
2017/04/16 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
python SOCKET编程基础入门
2021/02/27 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
外企财务年会演讲稿
2014/01/03 职场文书
餐厅总厨求职信
2014/03/04 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
关于Vue中的options选项
2022/03/22 Vue.js
vue自定义右键菜单之全局实现
2022/04/09 Vue.js