Question

我有一个列，其中每个td的样式需要根据值进行更改。有五种状态，因此必须有五种不同的边框颜色和字体颜色。如何在没有硬编码的角度脚本中执行此操作（新到角度）？

Please click here for example.

我在做的是：

在html中：

<table st-table = "tenants" class="table table-striped table-bordered">
   <tbody>
    <tr dir-paginate="t in tenants | orderBy:sortColumn:reverseSort | filter:searchText | itemsPerPage:itemsPerPage" current-page="currentPage" >
       <td ng-if="t.status.color==2"><b class = 'td_status'>{{t.status.id}}<b></td>

在css中：

.td_status {
   border-radius: 20px;
   width: auto;
  height: auto;
  min-width: 100px;
  display: inline-block;
 text-align: center;
 border: 1px solid red;
 padding: 5px;
}

在js：

datax.forEach(function(obj,i){  
    if (obj.last_paid) {
            if (obj.stripe_status == "active") {
              obj.status = {
                'id' : "Paid: Last Paid " + $filter('date')(obj.last_paid, 'MM-dd-yyyy'),
                'value': "Paid: Last Paid " + $filter('date')(obj.last_paid, 'yyyy-MM-dd HH:mm:ss Z'),
                'color' : 0
              }
            }
       else if (obj.stripe_status == "past_due" || obj.stripe_status == "unpaid") {
              obj.status = {
                'id' : "Past Due: Last Paid " + $filter('date')(obj.last_paid, 'MM-dd-yyyy'),
                'value': "Past Due: Last Paid " + $filter('date')(obj.last_paid, 'yyyy-MM-dd HH:mm:ss Z'),
                'color' : 4,
              }
            }....

Answer 1

我做了一个例子，因为它的工作有点慢。

在这里，您可以看到我对ng-class的使用。我给它一个函数并传递$scope.data item.status中定义的状态来自我的ng-repeat

<div ng-app="TestApp" ng-controller="TestController">
  <p ng-repeat="item in data" ng-class="getBorderColor(item.status)">
  {{item.name}}
  </p>
</div>

下面我有我的控制器和一些示例数据。 getBorderColor运行其条件并根据状态返回className。

var app = angular.module('TestApp', []);

app.controller('TestController', function($scope) {
  $scope.data = [
    {
      name:'Ronnie',
      status:1
    },
    {
      name:'Chance',
      status:2
    },
    {
      name:'Mike',
      status:1
    },
    {
      name:'Mark',
      status:3
    }];

    $scope.getBorderColor = function(status) {
      var className = '';
      if (status == 1) {
        className = 'status1';
      } else if (status == 2) {
        className = 'status2';
      } else if (status == 3) {
        className = 'status3';
      }
      return className;
    };
});

我的简单css是：

.status1 {
  border:1px solid red;
}

.status2 {
  border:1px solid blue;
}

.status3 {
  border:1px solid green;
}

https://jsfiddle.net/ojzdxpt1/7/

根据角度值更改td样式

1 个答案: