Changing class in the ng-repeat using the index value

Question

Here I have a div in the ng-repeat

<div   ng-class="{div0f:result.subscribed==omega.harish,div0g:!result.subscribed==omega.harish}" id="mecota0f" 
          ng-click="omega.harish=!result.subscribed" >

Now here result.subscribed is a boolean value coming from the services and omega.harish is my simple boolean variable the class of this div will be according to the result.subscribed value

Now I also want to change the active class of the one of the div created in the ng-repeat but the class of other created divs are kept getting affected.

var app = angular.module('subscribeWho', ['ngResource']);
app.controller('mysubscribeWho', ['subscriberFactory',
  function(subscriberFactory) {

    var self = this;


    subscriberFactory.get({}, function(subscriberFactory) {
      self.subscriberdata = subscriberFactory.user;
    });


    self.harish = false;
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="border-forpb" class="col-sm-12 panel panel-default" ng-app="subscribeWho">
  <div class="panel-body" id="artle_panel_body" ng-controller="mysubscribeWho as omega">
    <div ng-repeat="result in omega.subscriberdata">
      <div ng-class="{div0f:result.subscribed==omega.harish,div0g:!result.subscribed==omega.harish}" id="mecota0f" ng-click="omega.harish=!result.subscribed">
      </div>
    </div>
  </div>

Small Details When the div is being clicked the states of the above two classes div0f and div0g interchanges for the particular div — harish kumar
– harish kumar, Commented Jul 14, 2015 at 6:21

dfsq · Accepted Answer · 2015-07-14 06:20:32Z

1

You are changing outer scope omega.harish value which is common for all items in the ngRepeat. Instead create local scope copy of omega.harish with ngInit directive:

<div ng-repeat="result in omega.subscriberdata">
    <div ng-class="{div0f:result.subscribed==harish,div0g:!result.subscribed==harish}" id="mecota0f" 
        ng-init="harish = omega.harish"
        ng-click="harish=!result.subscribed">
    </div>
</div>

answered Jul 14, 2015 at 6:20

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

harish kumar Over a year ago

thanks a lot !!!, It worked It just that Being a newBie in angularjs , I was not been able to render this mistake

harish kumar Over a year ago

But this has One problem that It changes only one class but doesn't affect the other one on click

dfsq Over a year ago

What do you mean "affect the other one on click"?

harish kumar Over a year ago

When I click on the Div with the class Div0f It changes to the Div0g, But I click on the Div with the Class Div0g It doesnt changes it active class

harish kumar Over a year ago

thanks With some of the minor changes Dfsq Your code began to work as per my requirement

Collectives™ on Stack Overflow

Changing class in the ng-repeat using the index value

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related