AngularJS ng-repeat下使用ng-model

举例:

1
2
3
blue:<input type="radio" value="1" ng-model="selectValue"/>
red:<input type="radio" value="2" ng-model="selectValue"/>
yellow: <input type="radio" value="3" ng-model="selectValue"/>

以上代码实现一个单选框功能,当你选中其中的一个单选框,可以从$scope.selectValue中得到你选中的的选项的value。
同时改变$scope.selectValue的值,也可以让界面上选中相应的单选框。

假设单选框的个数是不固定的,用ng-repeat来展现。

1
2
3
4
5
6
7
<table>
<tr ng-repeat="row in collections">
<td>
{{row.name}}: <input type="radio" value="{{row.value}}" ng-model="selectValue"/>
</td>
</tr>
</table>

当你书写了上述代码后。你会发现点击其中的对话框,$scope.selectValue中并没有保存你选中的对应单选框的值。

这是因为处在ng-repeat之间的代码,对全局的$scope里变量的内容是不可见的,像{{row.name}}里的row,并不是全局$scope里的成员。
而是为ng-repeat创建的子scope里面的。所以要引用全局$scope里的成员,你可以使用$parent 来引用全局的$scope

1
2
3
4
5
6
7
<table>
<tr ng-repeat="row in collections">
<td>
{{row.name}}: <input type="radio" value="{{row.value}}" ng-model="$parent.selectValue"/>
</td>
</tr>
</table>
  1. thanks说道:

    终于知道原因了,谢谢博主!

  2. jgc说道:

    太好了,这个问题困扰两天了,一直不知道为什么,现在终于解决了

  3. hood说道:

    这样写后面的都会一起改变

    这样虽然不会,但是感觉效率很低

    有什么好办法么,我刚接触angularjs

    1. hood说道:

      ,div ng-repeat=”phone in Phones”,
      ,input ng-model=”$parent.phone.name”,,
      ,,div,
      这样写后面,input,的都会一起改变
      ,input ng-model=”$parent.phone.name[phone.Id]”,,
      这样虽然不会,但是感觉效率很低

      有什么好办法么,我刚接触angularjs

  4. wenting说道:

    这篇文章解决了我纠结了好多天的问题!!!太感谢了

  5. jam说道:

    感谢,解决了一直困扰我的一个问题。

    关于radio使用repeat标签时,我的form表单验证required属性一直过不了的问题。
    原来我的ng-model一直使用的是子域里的变量,并不是全局的,怪不得一直验证不成功。

回复 取消

提示:你的email不会被公布,欢迎留言^_^

*

验证码 *