AngularJS ng-repeat下使用ng-model

最新推荐文章于 2019-07-29 21:44:25 发布

原创最新推荐文章于 2019-07-29 21:44:25 发布

· 3.1k 阅读

0 ·

版权

文章标签：

#model #angularjs #webapp

前端框架同时被 3 个专栏收录

3 篇文章

订阅专栏

angularjs

2 篇文章

订阅专栏

webapp

2 篇文章

订阅专栏

本文介绍了在AngularJS中使用ng-repeat结合ng-model时遇到的问题，即无法正确获取input中的值。问题源于ng-repeat创建新的子scope导致的。解决方案包括直接引用父作用域的属性或在ng-model中使用'.'来指定对象属性。建议遵循最佳实践，避免此类问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJS ng-repeat下使用ng-model

如图所示，想要实现点击确定修改后，得到input中的值，因此尝试用下面的代码实现：

<tr ng-repeat="item in info ">

       <input type="text" ng-show="aa && item.uId==index" ng-value="item.uName" ng-model="modifName">
       <input type="text" ng-show="aa && item.uId==index" ng-value="item.uPwd" ng-model="modifPwd">   
</tr>

通过在repeat里给每一个input绑定ng-model,当点击修改按钮后，将输入input的新值，分别用两个变量modifName、modifPwd接收.但是结果console出来都是undefined,为什么

原因：

如果，你对angularJs的$scope,有深入了解，也许这个问题就迎刃而解了。原因就在,ng-repeat、ng-switch、ng-view、ng-include都会创建一个新的子scope，所以问题经常在这些指令中出现。

进行原型继承即意味着父作用域在子作用域的原型链上，这是JavaScript的特性。AngularJS的作用域还存在如下内部定义的关系：

scope. $parent指向scope的父作用域； scope.$ $childHead指向scope的第一个子作用域； scope.$ $childTail指向scope的最后一个子作用域； scope.$ $nextSibling指向scope的下一个相邻作用域； scope.$ $prevSibling指向scope的上一个相邻作用域；这些关系用于AngularJS内部历遍，如$ broadcast和 $emit事件广播，$ digest处理等。

关于scope作用域，这篇翻译自英文的文章阐述的非常详细。理解AngularJS的作用域Scope

解决方法：：

在子作用域中使用 $parent.parentScopeProperty，这样可以直接修改父作用域的属性。针对ng-repeat，因为它会对每一个item都会创建子作用域，所以使用$ parent指向父作用域最好的方式。这里具体代码：
```
<input type="text"   ng-model="$parent.modifName">
```
遵循一个原则：避免这个问题的最佳实践是在ng-model中总使用“.“，例如：

更好：
```
<input type="text"   ng-model="obj.modifName">
```
不推荐
```
<input type="text"   ng-model="modifName">
```
第二个方法需要在父作用域定义obj,

$scope.obj={modifName:”“};
在父作用域中定义函数，子作用域通过原型继承调用函数把值传递给父作用域（这种方式极少使用）。