关于javascript：为什么输入不能正确使用ng-repeat

Why the inputs are not working right with ng-repeat

本问题已经有最佳答案，请猛点这里访问。

有人能给我解释一下为什么在这个简单的例子中我不能得到当前选中的单选按钮吗？我尝试使用ng repeat指令动态生成单选按钮，并使用ng模型选择当前的单选按钮。这样地：

模板：

1
2
3

<input type="radio" name="movies" ng-value="kind" ng-model="kindSelected"> {{kind.name}}

Selected Movie :{{kindSelected}}

控制器：

1
2
3
4
5
6
7
8
9
10

mymodule.controller('MainCtrl', [ '$scope',function ($scope) {

$scope.movieKinds = [
{'name' : 'Action', 'movies' : ['Action#1', 'Action#2', 'Action#3']},
{'name' : 'Comedy', 'movies' : ['Comedy#1', 'Comedy#2', 'Comedy#3']},
{'name' : 'Drama', 'movies' : ['Drama#1', 'Drama#2']},
{'name' : 'Horror', 'movies' : ['Horror#1']}
];

}]);

因为在每次迭代中，当在放置了ng-repeat指令的任何位置重复模板时，ng-repeat确实会创建一个新的子作用域(原型继承)。

So what happens when ng-repeat creates a new prototypically inherited child scope?

In the child scope it carries all properties in which primitive
property initial value taken while creating child scope & object
values are taken with their references so update in parent scope value
will update in child scope value & vice versa.

在本例中，您在ng-repeat中使用了ng-model="kindSelected"变量，因此作用域变量在ng-repeat作用域内创建，在ng-repeat指令之外不可用。

为了解决这个问题，您可以在定义ng-model时使用object，以便在定义ng-model时遵循Dot rule。这意味着您可以在Controller&；中定义一个名为$scope.model的对象，然后添加kindSelected属性，以便在选中复选框时更新该值。

标记

1
2
3

<input type="radio" name="movies" ng-value="kind" ng-model="kindSelected"> {{kind.name}}

Selected Movie :{{model.kindSelected}}

代码

1	$scope.model = {};

解决这个问题的另一种方法是使用controllerAs语法，它将使用控制器的别名，这样就不会在HTML上发生与作用域层次结构相关的问题。无论您想要哪个控制器变量，都可以使用控制器的别名。