AngularJS ng-repeat下使用ng-model

本文介绍了在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. parentscopescope. childHeadscopescope. childTailscopescope. nextSiblingscopescope. prevSiblingscopeAngularJS broadcast和 emit广 digest处理等。

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


解决方法:

  1. 在子作用域中使用 parent.parentScopePropertyngrepeatitem使 parent指向父作用域最好的方式。这里具体代码:

    <input type="text"   ng-model="$parent.modifName">
  2. 遵循一个原则:避免这个问题的最佳实践是在ng-model中总使用“.“,例如:

    更好:

    <input type="text"   ng-model="obj.modifName">

    不推荐

    <input type="text"   ng-model="modifName">

    第二个方法需要在父作用域定义obj,

    $scope.obj={modifName:”“};

  3. 在父作用域中定义函数,子作用域通过原型继承调用函数把值传递给父作用域(这种方式极少使用)。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值