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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
javascript实现信息增删改查的方法
Jul 25 Javascript
前端jquery部分很精彩
May 03 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
vue表单数据交互提交演示教程
Nov 13 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缓存函数的使用说明
2013/05/10 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
python 切片和range()用法说明
2013/03/24 Python
Python的Django框架使用入门指引
2015/04/15 Python
Python子类继承父类构造函数详解
2019/02/19 Python
python顺序执行多个py文件的方法
2019/06/29 Python
python读取与处理netcdf数据方式
2020/02/14 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
如何客观的进行自我评价
2013/12/17 职场文书
监理资料员岗位职责
2014/01/03 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
小学生安全保证书
2014/02/01 职场文书
教师求职信
2014/06/17 职场文书
邓小平理论心得体会
2014/09/09 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL