CODEWITHSUNDEEP
javascriptangularjs
Razz
Razz

Reputation: 4015

Change model inside a ng-repeat scope from outside

I have a repeater inside of a controller, and each item in the repeater has its own status:

<div ng-controller="...">
  <div ng-repeat"...">{{status}}</div>
</div>

Now, lets say i want to change this status, if i use status = 'foo' inside the repeater it works like a charm, every item in the repeat can have its own status. However, i want to change this status from the controller, since i want to use some ajax calls and such magic. I've searched all the web and asked my good friend google several questions but i cant find any info about how to get to the scope in the repeated item.

This fiddle simulates my problem, if you click one of the buttons it will change the status of the whole scope to clicked and what i'm trying to achieve is to only get the circle next to the button to turn blue. (i know that i can add a value in the list but i have my reasons not do it that way.)

Upvotes: 3

Views: 160

Answers (2)

Chandermani
Chandermani

Reputation: 42659

This is the classic case of prototypal inheritance. You can use this.status to set status in current scope.

See my fiddle here

http://jsfiddle.net/BdcuS/

When the method is invoked it is invoked with this set to the current scope. Which is the scope of ng-repeat

My answer would not be complete till i link to this wiki page https://github.com/angular/angular.js/wiki/Understanding-Scopes that talks about this.

Upvotes: 4

CodingIntrigue
CodingIntrigue

Reputation: 78565

Each item needs to have its own unique status property, rather than one single one attached to your controller, for example:

function fooCtrl($scope, $timeout){
    // list is now an array of objects, each of which has an empty status property
    $scope.list = [{status: null}, {status: null}, {status: null}];

    $scope.setStatus = function(item, status){
        // Only update the status of that one property
        item.status = status;

        //Simulate an ajax request
        $timeout(function(){
            item.status = null;
        }, 1000);
    }
}

View:

<div ng-repeat="item in list">
    <div class="circle {{item.status}}">

    </div>
    <button ng-click="setStatus(item, 'clicked')">click me</button>
</div>

Update jsFiddle

Upvotes: 3

Related Questions