Use of ngClass

[Paresh Mutha]

I have 10 div's

all div's having same class

on clicking on 1 div out off 10 I want to Change background image of that div

on clicking on other div it should reset the previous div and change the image of clicked div

and i want it to be done with angularjs/ngclass

and the div's created are at runtime so i don't have id associated with the div

so kindly help me with the solution or small code sample

thank you

[Grant Rettke]

Create a model that has 10 values that represent each area, and whether it is selected or not.

Create a directive that renders a div that reflects the representation.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

--
Grant Rettke | ACM, AMA, COG, IEEE
gre...@acm.org | http://www.wisdomandwonder.com/
“Wisdom begins in wonder.” --Socrates
((λ (x) (x x)) (λ (x) (x x)))
“Life has become immeasurably better since I have been forced to stop taking it seriously.” --Thompson

[Paresh Mutha]

Grant Rettke :

Sir I am new to angularjs can you please  send me some examples please

[Michael Bielski]

You can generate IDs dynamically based upon whatever naming scheme you decide to use, but that is beside the point. There are probably hundreds of examples available out there on how to do this, but the general gist is contained in this pseudo-code:

myfunction (element reference)

     if the element.hasClass(the active class) 

          element.removeClass(the active class)

    otherwise

          element.addClass(the active class)

You should write a directive for this that binds on class (and again, there are many examples available if you search for them, and off the top of my head http://egghead.io/ comes to mind) or handle it in a service if you need to do other things besides poke around with the DOM. The point is that DOM manipulation like this should not happen in the controller.

[William Szeliga]

Another way to think about this is to just have ng-class set the css class of the attributes when a property is set to true.  Then have an ng-click that set's that property.  Some pseudo code would be as follows:

<ul>

<li ng-repeat='item in model.items' ng-class='{selected: item.selected, otherStyle: item.otherBooleanProperty}' ng-click='item.selected = true'>{{item.name}}</li>

<ul>

....

Somewhere in a controller have the following defined:

function Controller($scope){

$scope.model ={};

$scope.model.items = [

    {selected: false, otherBooleanProperty: true, name: 'aName'},

    {selected: false, otherBooleanProperty: true, name: 'aName1'},

    {selected: false, otherBooleanProperty: true, name: 'aName2'},

    {selected: false, otherBooleanProperty: true, name: 'aName3'}

];

}

Hope this helps gives you a different perspective on how to solve a problem like this.

PS and if you need to have all of the other items unselected then change ng-click to call a function in the controller to 1) loop through all of the items and set the 'selected' property to false, and then 2) set the passed in item's selected value to true. (ex: ng-click = 'clearSelection(item)')

-Bill

--