items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'}
html
<div class="variable" ng-repeat="item in items">{{item}} </div>
What I want to do is:
variable is fruit when item is apple, banana, lemon.
variable is animal when item is cat, dog, monkey.
variable is human when item is tom, john, baby
fruit, animal, human is css class
Please help, thanks
Replace your items which is uncorrect array format
items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'}
to
items = ['apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby']
ng-class is a good approach.Markup:
<div ng-repeat="item it items" ng-class="defineClass(item)">{{item}}</div>
Controller:
$scope.items = ['apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'];
$scope.defineClass = function(item) {
switch (item) {
case 'apple':
case 'banana':
case 'lemon':
return 'fruit';
break;
case 'cat':
case 'dog':
case 'monkey':
return 'animal';
break;
case 'tom':
case 'john':
case 'baby':
return 'human';
break;
}
}
Use ng-class.
<div ng-class="{'classname':variable}" ng-repeat="item in items">{{item}} </div>
For example
<div ng-class="{'human':item == 'tom'}" ng-repeat="item in items">{{item}} </div>
controller
$scope.fruit = ['apple', 'banana', 'lemon'];
$scope.animal = ['cat', 'dog', 'monkey'];
$scope.human = ['tom', 'john', 'baby'];
$scope.items = $scope.fruit.concat($scope.animal).concat($scope.human);
$scope.is = function(type, item) {
return ($scope[type].indexOf(item) != -1);
}
template
<div ng-class="{fruit: is('fruit',item), animal: is('animal',item), human: is('human',item)}" ng-repeat="item in items">{{item}} </div>
The most scalable approach would be to use different data structure. For example:
var items = [
{name: 'apple', type: 'fruit'},
{name: 'bannana', type: 'fruit'},
{name: 'lemon', type: 'fruit'},
{name: 'cat', type: 'animal'},
{name: 'dog', type: 'animal'},
{name: 'monkey', type: 'animal'},
{name: 'tom', type: 'human'},
{name: 'john', type: 'human'},
{name: 'baby', type: 'human'}
];
Yes, it's more verbose, but it pays back with convenience. If tomorrow you add new item, you don't have to touch template at all or change controller code to support it. It will automatically get proper class name.
<div class="{{item.type}}" ng-repeat="item in items">{{item.name}}</div>
<div class="{{item}}" ng-repeat="item in items">{{item}} </div>