Ion-item in with background color based on $scope value?

1

i got an ion-list with ng-repeat items based on SQLite data, the list items all ok, i added a showpopup to open a dialog that i can select a quantity for each item and store that item in the SQLite table, i want to change the ion-item backgrond color if the quantity is more than 0 , i tried to use the ng-style but all items background color changed not only one.

any help in this issue ?

2

Show us a snippet of your html code please with that ng-repeat and ng-class

3

You could try something like this.

4

@firaskudsy this codepen shows how to do something similar with a list of buttons:

See the Pen ng-repeat background color using ng-class by Sante Kotturi (@skotturi) on CodePen.

basically just add an array of objects to a controller:

.controller('MyCtrl', function($scope) {

  $scope.items = [
  { name: 1},
  { name: 2},
  {name: 3}
  ];

});

and in your html:

 <div class="button-bar">
      <button ng-repeat="item in items" class="button"
                    ng-init="item.clicked=false"    
                    ng-click="item.clicked = !item.clicked"
                    ng-class="{ 'button-balanced' : item.clicked }">{{item.name}}
      </button>
 </div>
 <h3 ng-repeat="item in items">Button {{item.name}} is {{item.clicked}}<h3>

in this case it sets the class to “button-balanced” which is an ionic built in class for buttons but if you wanted to apply this to a list of items you could write you own css:

.custom-background-active-color {
  background-color: <some-color>; 
}

and then just change the ng-class:

ng-class="{custom-background-active-color: item.clicked}"

but I think the real takehome message is the ng-init, the ng-click changing the value of clicked and then using ng-class. Note that “clicked” is created locally inside the ng-repeat scope for each item and thus doesn’t get applied to ALL the other items.

Hope this helps!

5

Thanks sakotturi , this reply and also the above was very helpfull

1 Like