AngularJS: Make ng-model available outside of ng-repeat
In my AngularJS app, I iterate over an array object and send the value to radio input as value. The general idea is that the user selects a radio cassette and the value returned by the $ routeParams part. Unfortunately the variable {{ modelSelected }}
doesn't seem to be available outside of the ng-repeat. Why? The first never shows the variable {{ modelSelected }}
.
Does AngularJS create ScopeChild inside ng-repeat?
<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>
source to share
When working with primitives or using bindings, usually try to use .
in the associated model property. This way, when a child scope is created, prototypal inheritance will reset properties (which are reference types) to the children. (use is $parent
almost always considered a hack). In your case, the property modelSelected
is primitive (even if it is present in the parent scope), but ng-repeat
creates a child scope that does not find that property (since inheritance does not carry it over, even if it is present) and creates a new property in its scope, so changes. contributed to this are not considered in the external area.
Initialize a property on a scope as an object selection={}
in your scope (in your example, this would be outsourced). And bind the model likeng-model="selection.modelSelected
Example: -
<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>
Read: Understanding Areas
source to share
Yes. It creates a new area that inherits from the parent area. Use $ parent.modelSelected to access the parent variable of the scope.
<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>
source to share
{{modelSelected}}
won't be accessible outside ng-repeat
of the way the scope works in AngularJS (see https://docs.angularjs.org/guide/scope )
The scopes are arranged in a hierarchical structure that mimics the DOM structure of the application
Since the element <h3>
you are trying to access the object {{modelSelected}}
is outside the scope of the iterator, the object is not available.
source to share