Question

使用ng-repeat指令我已经使用div形成了3行2列，如表格，然后我有2个红色和绿色的CSS类我想在下面的情况下应用这些CSS类，

第1行第1列 - 红色等级

第1行第2列 - 绿色等级

第2行第1列 - 绿色等级

第2行第2栏 - 红色等级

第3行第1列 - 红色等级

第3行第2列 - 绿色等级

同样明智的我需要应用css。

我怎样才能实现这种情况？

Answer 1

您可以使用$even，$odd和ng-class来实现这一目标

var app=angular.module('plunker', []);
app.controller('ListCtrl',ListCtrl);
function ListCtrl($scope) {
  
  $scope.items = [
    {name: 'foo', value: 'foo value',car:'chevy',model:'vette',year:'2013'},
    {name: 'bar', value: 'bar value'},
    {name: 'baz', value: 'baz value'}
  ];
  
  
}

.red{color:red;}
.green{color:green;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="plunker">
  <head>

  </head>
  <body>
    <div ng-controller="ListCtrl">
      <table class="table table-bordered">
        <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in items">
          <td ng-class="{'red':$even,'green':$odd}">{{item.name}}</td>
          <td ng-class="{'red':$odd,'green':$even}">{{item.value}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

Answer 2

试试这个：

<tbody ng-repeat="data in respdata">                    
    <tr align="left" ng-if="$even">                     
        <td class="red">{{data.id}}</td>
        <td class="green">{{data.first_name}}</td>
        <td>{{data.last_name}}</td>
        <td>{{data.email}}</td>                         
    </tr>
    <tr align="left" ng-if="$odd">                      
        <td class="green">{{data.id}}</td>
        <td class="red">{{data.first_name}}</td>
        <td>{{data.last_name}}</td>
        <td>{{data.email}}</td>                         
    </tr>
</tbody>

<style>
    .green {
         background-color: green;
    }
    .red {
        background-color: red;
    }
</style>

这样的输出：

应用CSS类

2 个答案: