admin管理员组文章数量:1302502
In my AngularJS app, I am looping through an array object and send the value to a radio input as value. The overall idea is that the user selects a radio box and the value with be back part of $routeParams. Unfortunately, the variable {{ modelSelected }} does not seemed to be available outside of the ng-repeat. Why? The first never shows the variable {{ modelSelected }}.
Does AngularJS creates a ScopeChild within the ng-repeat?
Link to my jsfiddle example
<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>
In my AngularJS app, I am looping through an array object and send the value to a radio input as value. The overall idea is that the user selects a radio box and the value with be back part of $routeParams. Unfortunately, the variable {{ modelSelected }} does not seemed to be available outside of the ng-repeat. Why? The first never shows the variable {{ modelSelected }}.
Does AngularJS creates a ScopeChild within the ng-repeat?
Link to my jsfiddle example
<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>
3 Answers
Reset to default 6When dealing with primitives or using bindings generally try to prefer using a . in the model property that is being bound. So that when a child scope is created prototypical inheritance will carry down the properties (which are reference types) down to the children. (using $parent almost always is considered as a hack). In your case the property modelSelected is a primitive (even if it is present on the parent scope) and ng-repeat creates a child scope which does not finds this property (since inheritance does not carry it down even if it were present) and creates a new property on its scope, so the changes made to that are not seen to the outer scope.
Initialize a property on the scope as an object, selection={} in your scope (in your example it would be the outerscope). And bind the model as ng-model="selection.modelSelected
Ex:-
<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>
Demo
Read: Understanding Scopes
Yes. It does create a new scope that inherits the parent scope. Use $parent.modelSelected to access the parent scope's variable.
<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="$parent.modelSelected" type="radio" name="patient" value="{{ model.name }}" required>
</p>
<h3> Selected {{ modelSelected }} shown inside paragraph</h3>
</div>
</body>
The {{modelSelected}} would not be available outside the ng-repeat because of how scope works in AngularJS (see https://docs.angularjs/guide/scope)
Scopes are arranged in hierarchical structure which mimic the DOM structure of the application
So since the <h3> element you are trying to access the {{modelSelected}} object from is outside the scope of the iterator, the object is not available.
本文标签： javascriptAngularJS Make ngmodel available outside of ngrepeatStack Overflow
版权声明：本文标题：javascript - AngularJS: Make ng-model available outside of ng-repeat - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741701485a2393315.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论