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 相关文章推荐
input 输入框内的输入事件详细分析
Mar 17 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
详解mpvue开发微信小程序基础知识
Sep 23 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 裁剪图片成固定大小代码方法
2009/09/09 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
jQuery Mobile 导航栏代码
2013/11/01 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
vue实现分页栏效果
2019/06/28 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
Python3.5运算符操作实例详解
2019/04/25 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Python3列表List入门知识附实例
2020/02/09 Python
python模拟斗地主发牌
2020/04/22 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
法学毕业生自我鉴定
2013/11/08 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
门诊手术室工作制度
2014/01/30 职场文书
批评与自我批评材料
2014/02/15 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
大学生找工作求职信
2014/07/09 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
php 原生分页
2021/04/01 PHP
Python基础之变量的相关知识总结
2021/06/23 Python