为什么输入不能正常工作 ng-repeat
Why the inputs are not working right with ng-repeat
有人可以向我解释为什么在这个简单示例中我无法获得当前选定的单选按钮吗?我正在尝试使用 ng-repeat 指令动态生成单选按钮,并使用 ng-model 选择当前的单选按钮。喜欢这个:
模板:
<div ng-repeat="kind in movieKinds">
<input type="radio" name="movies" ng-value="kind" ng-model="kindSelected"> {{kind.name}}<br>
</div>
Selected Movie :{{kindSelected}}
控制器:
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
指令被放置。
那么,当
ng-repeat
创建新的原型继承子作用域时会发生什么情况?在子作用域中,它承载
primitive
的所有属性 创建子范围和对象时获取的属性初始值 值与其引用一起获取,因此在父范围值中更新 将在子范围值中更新,反之亦然。
在您的例子中,您在ng-repeat
内ng-model="kindSelected"
变量,因此范围变量是在ng-repeat
范围内创建的,并且在ng-repeat
指令之外不可用。
要解决此问题,您可以在定义ng-model
时使用object
,以便在定义ng-model
时可以遵循Dot rule
。这意味着您可以在控制器中定义一个名为$scope.model
的对象,然后添加kindSelected
属性,以便在选择复选框时更新值。
标记
<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}}
法典
$scope.model = {};
解决此问题的另一种方法是使用controllerAs
语法,该语法将使用控制器的别名,因此HTML上不会发生与范围层次结构相关的问题。无论您想要哪个控制器变量,都可以使用该控制器的别名。
相关文章:
- ng repeat在ng repeat-过滤器不工作
- 将我的列表 vom ng-repeat 更改为收集重复 ng-click 后,无法正常工作
- 使用ng-repeat时,弹性滑块无法正常工作
- 如何让ng repeat在指令模板中工作
- 为什么Ng Repeat不工作,如果按钮从不同的形式调用
- AngularJS “ng-repeat |滤波器:..“没有像我预期的那样工作(不显示任何数据)
- Angularjs ng-repeat过滤器在v1.0.1中工作,而不是v1.3.7
- Ng-Repeat只工作一次
- AngularJS:$index如何在ng-repeat中工作
- javascript [],[[]] 和 [{}] 在 angularJS 中与 ng-repeat 一起使用时的工作差
- AngularJS ng-repeat,两个单选按钮无法正常工作
- Angular JS - ng-repeat无法正常工作
- 设置变量时,Angular Js ng init在ng repeat内部无法正常工作
- 当ng repeat完成一个事件时触发它'’s的工作
- Jquery插件在AngularJS ng repeat中不工作
- 为什么ng repeat不在angular js中工作(使用指令)
- AngularJS ng repeat-jquery Datepicker在ng repeat内不工作
- Ng-repeat在HTML中不能正常工作,在angular js中编译
- 为什么ng-repeat-start和ng-repeat- end不能正常工作
- 为什么输入不能正常工作 ng-repeat