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中parentNode,childNodes,children的应用详解
Dec 17 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
Element InputNumber计数器的使用方法
Jul 27 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中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
jquery键盘事件使用介绍
2011/11/01 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
python django集成cas验证系统
2014/07/14 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
如何在python中执行另一个py文件
2020/04/30 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
七一讲话心得体会
2014/09/05 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
健康证明
2015/06/19 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js