[Angularjs]ng-repeat中使用ng-model遇到的问题
写在前面
在ng-reapet中如何为ng-model双向绑定呢?在项目中确实遇到这样的问题,绑定了,但是在controller中获取不到它的值,确实挺奇怪的。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-class,ng-class-even,ng-class-odd
一个例子
有这样一个人员列表,我们希望单击按钮对某人的姓名进行修改,这个时候我们就需要获取当前对象的某个属性,代码片段及视图如下所示:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ng-repeat和ng-model</title>
<meta charset="utf-8" />
<script src="JS/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller('DetailsController', function ($scope) { $scope.pepoles = [{ 'id': 1, 'name': 'zhangsan', 'gender': '男' }, { 'id': 2, 'name': 'zhangsan2', 'gender': '男' }, { 'id': 3, 'name': 'zhangsan3', 'gender': '男' }];
console.log($scope.pepoles); }); </script>
</head>
<body> <div ng-controller="DetailsController"> <ul>
<li ng-repeat=" p in pepoles">
ID:{{p.id}}<br />
name:{{p.name}}<br />
gender:{{p.gender}}<br />
<input type="text" name="name" value="{{p.name}}" ng-model="p.name" /> <button>更改</button>
</li>
</ul> </div>
</body>
</html>
一般会这样写为按钮注册单击事件,单击后得到文本框绑定的属性的新值:
<button ng-click="changeName()">更改</button>
并在Controller中编写方法的实现,以及$http请求服务进行修改数据库。
$scope.changeName = function () {
console.log($scope.name);
};
这样单击按钮后
并不能识别name属性。
但是可以通过另外的方法实现
<input type="text" name="name" value="{{p.name}}" ng-model="p.name" />
<button ng-click="changeName(p)">更改</button>
$scope.changeName = function (item) {
console.log(item);
};
解决办法:直接将当前对象传到方法中或者传属性p.name。
网上还有另外一种解决方案,但是有个问题。
<input type="text" name="name" value="{{p.name}}" ng-model="$parent.name" />
这种方式在controller中确实可以通过$scope.name拿到文本框的值,但是在视图中,修改一个其他的也会跟着改变。
最后就出现了这样的情况:
很明显这并不是我们想要的结果。
总结
在ng-repeat中ng-model的问题,原因是ng-model对controller中的$scope是不可见的,所以在使用repeat中的某个对象的属性的时候,最好还是将该对象或者该对象的值传到方法中。刚接触angularjs,不知道有没有更好的解决办法,这是在项目中遇到的一个问题,记录在此,希望你有个更好的解决方式,不妨留言,谢谢。
[Angularjs]ng-repeat中使用ng-model遇到的问题的更多相关文章
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- angular报错:angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq
报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p& ...
- 【码在江湖】前端少侠的json故事(中)ng的json
ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...
- 不知道张(zhāng)雱(pāng)是谁?你out了!
张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...
- AngularJS移动开发中的各种坑
捂脸,辛酸泪ing...... 本文主要涉及部分在移动设备上特有的问题. 相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. DOM操作的问题 避免使用 jQue ...
- AngularJS移动开发中的坑汇总
使用AngualrJs开发移动App已经快半年了,逐渐积累了非常多AngularJS的问题,特别是对于用惯了Jquery的开发人员,转到AngularJS还是须要克服非常多问题的.不像Jquery那样 ...
- [转]AngularJS移动开发中的坑汇总
使用AngualrJs开发移动App已经快半年了,逐渐积累了很多AngularJS的问题,特别是对于用惯了Jquery的开发者,转到AngularJS还是需要克服很多问题的.不像Jquery那样侧重D ...
- CI中的控制器中要用model中的方法,是统一写在构造器方法中,还是在每一个方法中分别写
Q: CI中的控制器中要用model中的方法,是统一写在构造器方法中,还是在每一个方法中分别写 A: 建议统一写,CI框架会自动识别已经加载过的类,所以不用担心重复加载的问题 class C_User ...
- .NET中 DAL+IDAL+Model+BLL+Web是什么意思
在.NET中 DAL+IDAL+Model+BLL+Web是什么意思 http://hi.baidu.com/hexiaojian/item/8d0c1a8e648546d75e0ec1e7 其实三层 ...
- 推荐系统中的Graph Model
转自:http://www.cnblogs.com/wentingtu/archive/2012/05/28/2521166.html 推荐中对graph model的研究主要有两个方面,一个是如何构 ...
随机推荐
- 【转】【UML】使用Visual Studio 2010 Team System中的架构师工具(设计与建模)
Lab 1: 应用程序建模 实验目标 这个实验的目的是展示如何在Visual Studio 2010旗舰版中进行应用程序建模.团队中的架构师会通过建模确定应用程序是否满足客户的需求. 你可以创建不同级 ...
- PHP基础13:数组排序
<?php //1.对数组进行升序排序 - sort() $cars=array("VOLVO","BMW","BYD"); $fri ...
- SQL时间相关 - SQL日期,时间比较
SQL Server 中时间比较 例子: select count(*) from table where DATEDIFF ([second], '2004-09-18 00:00:18', '20 ...
- Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
- JS 之DOM range对象
DOM范围 DOM中的range对象是DOM2中新定义的接口.通过这个对象可以选择文档中的某个区域,而不必考虑节点的界限. 创建范围 document.createRange()创建一个范围,这个范围 ...
- 预备作业02:成功经验与C语调查20155230
成功的经验 在写这一次的博客之前,我看了一部分同学所写的博客.因为我不懂关于自己更优秀的技能这一栏要怎么写,所以想要去找能以借鉴的东西.看完发现,这些同学在介绍自己技能时更多的是写自己在某一领域的成就 ...
- UIView的layoutSubviews和drawRect方法何时调用 ———转
转自:http://jianyu996.blog.163.com/blog/static/112114555201305113018814/ 首先两个方法都是异步执行.layoutSubviews方便 ...
- C#中无边框窗体移动
拖动无边框窗体Form至桌面任何位置 首先建一个Windows应用程序将Form1的 FormBorderStyle属性设置为Noe Point mouseOff;//鼠标移动位置变量 bool le ...
- python selenuim使用代理的方式
一.FireFox浏览器 myProxy = "60.195.250.55:80" proxy = Proxy({ 'proxyType': ProxyType.MANUAL, ' ...
- iptables 的使用
iptables 是Linux 防火墙规则配置命令 iptables -L -n 查看目前配置 iptables -F 清除预设表filter中的所有规则链的规则 iptables -A ...