根据angularjs中模型的值更改类

Question

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'}

html

 <div class="variable" ng-repeat="item in items">{{item}} </div>

我想做的是：

当项目为apple, banana, lemon时，变量为fruit。

当项目为cat, dog, monkey时，变量为animal。

当项目为tom, john, baby时，变量为human

水果，动物，人类是css类

请帮忙，谢谢

Answer 1

替换数组格式不正确的项目

items = {'apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby'}

到

items = ['apple', 'banana', 'lemon', 'cat', 'dog', 'monkey', 'tom', 'john', 'baby']

使用ng-class 是一个好方法。

标记：

<div ng-repeat="item it items" ng-class="defineClass(item)">{{item}}</div>

控制器：

$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;
    }
}

Answer 2

使用 ng-class。

<div ng-class="{'classname':variable}" ng-repeat="item in items">{{item}} </div>

例如

<div ng-class="{'human':item == 'tom'}" ng-repeat="item in items">{{item}} </div>

Answer 3

控制器

$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);
}

模板

<div ng-class="{fruit: is('fruit',item), animal: is('animal',item), human: is('human',item)}" ng-repeat="item in items">{{item}} </div>

Answer 4

最具可扩展性的方法是使用不同的数据结构。例如：

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'}
];

是的，它更冗长，但它带来了便利。如果明天您添加新项目，您根本不必触摸模板或更改控制器代码来支持它。它会自动获得正确的类名。

<div class="{{item.type}}" ng-repeat="item in items">{{item.name}}</div>

演示：http://plnkr.co/edit/nrlSChOkp0rC7KRPI3FO?p=preview