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重要知识更新
Jul 08 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
webpack打包单页面如何引用的js
Jun 07 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
JS中的BOM应用
Feb 02 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP与以太坊交互详解
2018/08/24 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
前端性能优化及技巧
2016/05/06 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
python执行精确的小数计算方法
2019/01/21 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Python如何操作docker redis过程解析
2020/08/10 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
英国电气世界:Electrical World
2019/09/08 全球购物
广告词串烧
2014/03/19 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
地道战观后感500字
2015/06/04 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
三好学生竞选稿
2015/11/21 职场文书
Python3接口性能测试实例代码
2021/06/20 Python