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系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
前端开发之便利店收银系统代码
Dec 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的开合式多级菜单程序
2006/10/09 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
javascript使用链接跨域下载图片
2019/11/01 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
pandas带有重复索引操作方法
2018/06/08 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
顶岗实习接收函
2014/01/09 职场文书
城管综合整治方案
2014/05/01 职场文书
学生鉴定评语大全
2014/05/05 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
新农村建设典型材料
2014/05/31 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
公司内部升职自荐信
2015/03/27 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python