neu*_*rix 3 javascript angularjs angularjs-ng-repeat angular-ngmodel
在我的AngularJS应用程序中,我循环遍历数组对象并将值作为值发送到无线电输入.总体思路是用户选择一个单选框,并将值作为$ 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>
处理基元或使用绑定时,通常尝试在绑定.的模型属性中使用a .因此,当创建子范围时,原型继承将向下传递属性(它们是引用类型).($parent几乎总是使用被视为黑客攻击).在您的情况下,该属性modelSelected是一个原语(即使它存在于父作用域中)并ng-repeat创建一个子作用域,该作用域找不到此属性(因为继承不会将其降低,即使它存在)并创建一个新属性它的范围,因此对其进行的更改不属于外部范围.
在作用域中初始化作用域上的属性,selection={}在您的作用域中(在您的示例中,它将是outerscope).并将模型绑定为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>
阅读:了解范围