CODEWITHSUNDEEP
angularjs
Michael
Michael

Reputation: 13616

How to bind element once?

I want to bind item to the view only once in my angulajs project.

Here is plunker.

Here the template html:

<div class="form-group">
  <div class="col-xs-8">
    <span ng-repeat="city in ma.cities" class="view" ng-if="city.Id == ma.selected">
             {{::city.Name}}
     </span>

    <select class="form-control" 
    ng-model="ma.selected" 
    ng-options="city.Id as city.Name for city in ma.cities">

    </select>
  </div>
</div>

I want the city.Name to be bind to template html only once. But the problem that when I change the item in select element the city.Name is also updated.

I try to use once bind operator :: but it didn't help.

How can I bind element to the view only once and to prevent update?

Upvotes: 0

Views: 53

Answers (3)

Michael
Michael

Reputation: 13616

As YOU adviced I modified html template:

 <span ng-repeat="city in ::ma.cities" class="view" ng-if="::city.Id == ma.selectedId">
                 {{city.Name}}
         </span>

Here is plunker.

Upvotes: 0

John Smith
John Smith

Reputation: 2341

I agree with Mike, the question is a bit ambiguous. I think what you're asking for is:

<span>{{::ma.cities[ma.selected].Name}}</span>

But then again, as Mike said, you could've achieved that with another scope variable, and it would be probably a much clearer solution.

Upvotes: 1

Mike Feltman
Mike Feltman

Reputation: 5176

The value isn't changing. You're got an ng-if nested within an ng-repeat and when the city is changed which item is displayed changes.

If I'm following what you're trying to do, I would store the currently selected city to a property on the controller when the controller is created and display that property, eliminating the ng-repeat and the ng-if in the process.

Upvotes: 2

Related Questions