为什么 ng-repeat 输入不能正常工作 [英] Why the inputs are not working right with ng-repeat

问题描述

有人可以向我解释为什么在这个简单的示例中我无法获得当前选定的单选按钮.我正在尝试使用 ng-repeat 指令动态生成单选按钮，并使用 ng-model 获取当前选择的单选按钮.像这样:

模板:

<input type="radio" name="movies" ng-value="kind" ng-model="kindSelected">{{kind.name}}
所选电影:{{kindSelected}}

控制器:

mymodule.controller('MainCtrl', [ '$scope',function ($scope) {$scope.movi​​eKinds = [{'name' : 'Action', 'movies' : ['Action#1', 'Action#2', 'Action#3']},{'name':'喜剧'，'电影':['喜剧#1'，'喜剧#2'，'喜剧#3']}，{'name':'戏剧'，'电影':['戏剧#1'，'戏剧#2']}，{'name':'恐怖'，'电影':['恐怖#1']}];}]);

解决方案

因为 ng-repeat 确实在每次迭代时创建了一个新的子作用域(原型继承)，当它在 ng-repeat 指令已被放置.

<块引用>

那么当 ng-repeat 创建一个新的原型继承子作用域时会发生什么?

在子作用域中，它携带 primitive 所在的所有属性创建子作用域时采用的属性初始值 &目的值与其引用一起获取，因此在父范围值中更新将更新子范围值 &反之亦然.

在您的情况下，您在 ng-repeat 中有 ng-model="kindSelected" 变量，以便在 ng-repeat<中创建范围变量/code> 范围并且在 ng-repeat 指令之外不可用.

为了解决这样的问题，你可以在定义ng-model时使用object，这样你就可以在定义时遵循Dot ruleng模型.这意味着您可以在控制器和内部定义一个名为 $scope.model 的对象.然后添加 kindSelected 属性，以便在选择复选框时更新值.

标记

<input type="radio" name="movies" ng-value="kind" ng-model="kindSelected">{{kind.name}}
所选电影:{{model.kindSelected}}

代码

$scope.model = {};

<小时>

解决此问题的另一种方法是使用 controllerAs 语法，该语法将使用控制器的别名，因此 HTML 上不会发生与范围层次结构相关的问题.无论您想要哪个控制器变量，您都可以使用该控制器的别名.

Could someone explain to me why I can't get the current selected radio-button in this simple example. I'm trying to generate dynamically the radio-buttons with an ng-repeat directive and get the current radio-button selected using ng-model. Like this:

Template:

<div ng-repeat="kind in movieKinds">
    <input type="radio" name="movies" ng-value="kind" ng-model="kindSelected"> {{kind.name}}<br>
</div>
Selected Movie :{{kindSelected}}

Controller:

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']}
    ];

}]);

解决方案

Because ng-repeat does create a new child scope(prototypically inherited) on each iteration when it repeats a template on wherever ng-repeat directive has been placed.

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.

Here in your case you had ng-model="kindSelected" variable inside ng-repeat so that scope variable got create inside the ng-repeat scope and doesn't available outside ng-repeat directive.

To fix such a problem you could use object while defining ng-model so that you could follow Dot rule while defining ng-model. That means you could define a object called as $scope.model inside controller & then add kindSelected property so that the value will get updated on selection of checkbox.

Markup

<div ng-repeat="kind in movieKinds">
    <input type="radio" name="movies" ng-value="kind" ng-model="kindSelected"> {{kind.name}}<br>
</div>
Selected Movie :{{model.kindSelected}}

Code

$scope.model = {};

---

The other way to fix this problem is to use controllerAs syntax which will use alias of controller so the scope hierarchy related problem doesn't happen on HTML. Whichever controller variable you want you could use that alias of the controller.

这篇关于为什么 ng-repeat 输入不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！