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实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
分析javascript原型及原型链
Mar 18 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
vue+Element-ui前端实现分页效果
Nov 15 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读注册表
2006/10/09 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
Python反射用法实例简析
2017/12/22 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
Python如何生成xml文件
2020/06/04 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
python如何随机生成高强度密码
2020/08/19 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
某同学的自我鉴定范文
2013/12/26 职场文书
招聘单位介绍信
2014/01/14 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
公司内部升职自荐信
2015/03/27 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书