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中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
js数组的基本使用总结
Jan 18 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的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php常用文件操作函数汇总
2014/11/22 PHP
php格式化电话号码的方法
2015/04/24 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
JavaScript延迟加载
2021/03/09 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
基于python log取对数详解
2018/06/08 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
函授本科自我鉴定
2014/02/04 职场文书
骨干教师申报材料
2014/12/17 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书