将计算的 class 添加到 angular 中的 HTML 元素

Question

我在页面上渲染了一堆用户图标。我想根据他们的 ID 给他们一个 class。

示例用户对象

{ id: 1234, name: "foo" }

HTML元素

<div ng-repeat="user in userList" class="something-{{ user.id % 10 + 1 }}">
</div>

所以 classes 会像 "something-1", "something-2", ... 基于用户 ID。

以上代码无效。没有 class 出现在元素上。正确的做法是什么？

Answer 1

请尝试 ng-init。在这种情况下，您的 HTML 将是

<div ng-repeat="user in userList" ng-init="myId = (user.id % 10) + 1;" class="something-{{ myId }}">
</div>

Answer 2

使用 ng-class

 <div ng-repeat="user in userList" data-ng-class="{class1:user.id===1234}"></div>

或者你可以使用函数

<div ng-repeat="user in userList" class="{{getClassName(user)}}">
</div>

函数可以是

$scope.getClassName = function(user){
    return "class-" + (user.id * 10)+1; 
}

Answer 3

我会在控制器中构建类，以保持视图整洁，整洁，干净的 JS 操作更适合控制器。

users.forEach(function (user) {
  user.klass = 'something-' + (user.id % 10 + 1);
});

<div ng-repeat="user in users" class="{{::user.klass}}"> 
<!-- :: added. kill the watchers -->

Add a calculated class to an HTML element in angular