在我的 AngularJS 应用程序中,我循环遍历数组对象并将值作为值发送到 radio 输入。总体思路是用户选择一个单选框和 $routeParams 后面的值。 不幸的是,变量 {{ modelSelected }}
在 ng-repeat 之外似乎不可用。为什么?第一个从不显示变量 {{ modelSelected }}
。
AngularJS 会在 ng-repeat 中创建一个 ScopeChild 吗?
<html ng-app>
<body ng-init="models = [{name:'Sam'},{name:'Harry'},{name:'Sally'}]">
<h3> Selected {{ modelSelected }} shown outside paragraph</h3>
<div ng-repeat="model in models">
<p>{{ model.name }} -
<input ng-model="modelSelected" type="radio" name="patient" value="{{ model.name }}" required>
</p>
<h3> Selected {{ modelSelected }} shown inside paragraph</h3>
</div>
</body>
</html>
最佳答案
在处理原语或使用绑定(bind)时,通常会尝试在被绑定(bind)的模型属性中使用 .
。因此,当创建子作用域时,原型(prototype)继承会将属性(引用类型)传递给子作用域。 (使用 $parent
几乎总是被认为是 hack)。在您的情况下,属性 modelSelected
是一个原语(即使它存在于父作用域中)并且 ng-repeat
创建了一个找不到此属性的子作用域(因为即使它存在,继承也不会继承它)并在其范围内创建一个新属性,因此对其所做的更改不会被外部范围看到。
将作用域上的一个属性初始化为一个对象,selection={}
在您的作用域中(在您的示例中它将是外部作用域)。并将模型绑定(bind)为 ng-model="selection.modelSelected
例如:-
<body ng-init="models = [{name:'Sam'},{name:'Harry'},{name:'Sally'}]; selection={}">
<h3> Selected {{ selection.modelSelected }} shown outside paragraph</h3>
<div ng-repeat="model in models">
<p>{{ model.name }} -
<input ng-model="selection.modelSelected" type="radio" name="patient" value="{{ model.name }}" required>
</p>
<h3> Selected {{ selection.modelSelected }} shown inside paragraph</h3>
</div>
</body>
关于javascript - AngularJS:使 ng-model 在 ng-repeat 之外可用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25170939/