AngularJS，CSS:突出显示特定的表行

AngularJS, CSS : Highlighting a particular table row

本文关键字：显示 CSS AngularJS      更新时间：2023-12-29

有什么方法可以突出显示特定的表行吗？

我有一个表格和一组角度代码，例如：

angular.module('myApp', []).controller('myTest', function($scope) {
 var data = [];
 for(var i = 0; i < 10; i++) {
      data[i] = i;
 }
 $scope.data = data; 
});

HTML:

<table ng-app="myApp" ng-controller="myTest">
 <tr ng-repeat="x in data">
      <td > {{ x }} </td>
 </tr>
</table>

http://jsfiddle.net/omarjmh/Lvc0u55v/1895/

有没有像那样做

如果x等于1然后css：高亮显示tr:blue？

谢谢！

您可以使用$even和$odd。

angular.module('myApp', []).controller('myTest', function($scope) {
 var data = [];
 for(var i = 0; i < 10; i++) {
      data[i] = i;
 }
 $scope.data = data; 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myApp">
  <div ng-controller="myTest">
 <table >
 <tr ng-repeat="x in data" ng-style="{'background-color': ($even ? 'green' : 'red')}">
      <td > {{ x }} </td>
 </tr>
</table>
   </div>
</div>

使用ngStyle:

tr ng-repeat="x in data" ng-style="{'background-color': (x === 1 ? 'blue' : 'white')}"

您可以使用CSS、来实现它

tr:nth-child(even) {
    background-color: #000000;
}

偶数/奇数都有效。

或者有角度，

为此，应该使用角度指令ngClassEven和ngClassOdd。

查看文档部分，了解如何使用

http://docs.angularjs.org/api/ng.directive:ngClassEven

http://docs.angularjs.org/api/ng.directive:ngClassOdd

相关文章：