根据列值

时间:2015-10-02 03:00:06

标签: javascript html css angularjs

我使用具有列状态的ng-repeat获取数据。我想根据状态更改行颜色,即如果状态是批准的,则行颜色设置为绿色,如果状态被拒绝,则行颜色为设置为红色。任何人都可以帮助..提前谢谢

2 个答案:

答案 0 :(得分:1)

在您的问题中包含一些代码段以便我们更好地理解您的问题通常是一种很好的做法。如果没有它,我们只能进行猜测,这些猜测很可能不是你想要的或不适合你的风格。

我认为您的数据由<tr>

中的ng-repeat填充
<tr ng-repeat="row in tableData" ng-class="{approved: row.status == 1, rejected: row.status == 0}">
  <td>{{row.data1}}</td>
  <td>{{row.data2}}</td>
</tr>

CSS:

tr.approved { background-color: green }
tr.rejected { background-color: red }

以上是根据特定条件将特定样式应用于数据的更合适方式。

如果你想要快速和肮脏的方式,你也可以直接应用这种风格

<tr ng-repeat="row in tableData" ng-style="{'background-color': ((row.status == 1) ? 'green' : (row.status == 0) ? 'red' : '') }">
  <td>{{row.data1}}</td>
  <td>{{row.data2}}</td>
</tr>

答案 1 :(得分:1)

你可以在这里使用javascript / jquery。这很简单! :)在您的标头标签中,包括以下内容,以便您能够使用jQuery:

var myApp = angular.module('myApp', ['ngCookies']);
myApp.controller('MyController', ['$scope', '$cookies', '$cookieStore', '$window', function($scope, $cookies, $cookieStore, $window) {
$cookies.userName = 'Max Joe';
$scope.cookiesUserName = $cookies.userName;
$cookieStore.put('technology', 'Web');
$scope.cookietechnology = $cookieStore.get('technology'); }]);

然后将此功能放入您的其他 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 标记内(只需将&#34; yourtableid&#34;更改为&#34;#&#34后的表格ID):

script

});