Question

我正在尝试根据某个值为我的行着色。

HTML：

<tr ng-repeat="user in users | filter: u | orderBy:orderProperty" ng-class="{'added': user.status === 'added'}">
</tr>

CSS：

.added {
background-color : green;
color: white;
}

我的CSS适用于属性color:white的每一行，它将文本着色为白色，但我的CSS在属性background-color:green

的两行中应用一次

我使用简单的类而不是ng-class来解决同样的问题：

<tr ng-repeat="user in users | filter: u | orderBy:orderProperty" class="added">
</tr>

我的用户JSON架构：

  [
          {
            name : 'Toto',
            age : '',
            tel : '****',
            hobbies : 'basket'
          },...
   ]

每个用户有1000个用户和20个属性。

Answer 1

这是一个有效的演示：

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.users = [{
    name: 'Carlos',
    status: 'added'
  }, {
    name: 'Jean',
    status: 'new'
  }, {
    name: 'Paul',
    status: 'added'
  }];
}]);

.added {
  background-color: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table>
    <tr ng-repeat="user in users" ng-class="{'added': user.status === 'added'}">
      <td>{{user.name}}</td>
       <td>{{user.status}}</td>
    </tr>
  </table>
</div>

Answer 2

你可以试试这个

<tr ng-repeat="user in users | filter: u | orderBy:orderProperty" ng-class="user.status === 'added' ? 'added' : '' ">

ng-class =“user.status ==='已添加'？'已添加'：''”

Answer 3

使用方法如下

<tr ng-repeat="user in user | orderBy : ol" ng-class='{added : user.status == "added"}'>

ng-class和css on tr ng-repeat

3 个答案: