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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
给Function做的OOP扩展
May 07 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
javaScript 逻辑运算符使用技巧整理
May 03 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 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神奇又有用的Trait
2019/03/25 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
理解JavaScript原型链
2016/10/25 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
go语言计算两个时间的时间差方法
2015/03/13 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python切换pip安装源的方法详解
2016/11/18 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
python数据结构之链表详解
2017/09/12 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
中国电视购物:快乐购
2017/02/04 全球购物
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
工商管理毕业生推荐信
2013/12/24 职场文书
最美护士演讲稿
2014/08/27 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
护理心得体会范文
2016/01/22 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
Django路由层如何获取正确的url
2021/07/15 Python
python 离散点图画法的实现
2022/04/01 Python
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle