在满足条件时为文本着色

Question

当条件（if）满足时，我尝试将文本着色为绿色或红色。

这是我的函数getAll（）

            function getAllTasks() {
                $http.get('db_files/tasksDB.php').then(function (response) {
                    $scope.tasks = response.data;
                    $scope.tasks = response.data.map(function (item) {
                        var millisDiff = (new Date(item.deadline) - new Date(item.task_start));
                        item.dayDiff = Math.floor(millisDiff / (1000 * 60 * 60 * 24));
                        $scope.color = function () {
                            return (item.dayDiff < 1) ? 'red' : 'green';
                        };
                        return item;
                    });
                });
            }

在我的表格中，有一部分我想给文本上色。下面的例子不起作用。

<td md-cell><font color="{{task.color}}">{{ task.dayDiff }}</font></td>

我也试过，但它总是在绿色或红色上着色。

<td md-cell><font color="{{color}}">{{ task.dayDiff }}</font></td>

我想做这样的事情：如果有一天，然后颜色文本的红色或绿色。

Answer 1

使用ng-style指令从控制器分配样式

angular.module("app",[])
.controller("ctrl",function($scope){

  $scope.itemArr = [{  
     "id":"521",
     "username":"defus",
     "task":"test",
     "dept":"test",
     "status":"Otwarte",
     "task_start":"2017-02-26 11:47:29",
     "task_end":"0000-00-00 00:00:00",
     "task_time":null,
     "deadline":"2017-02-28"
  }]
 
  
 $scope.itemArr =   $scope.itemArr.map(function(item) {
    var millisDiff = (new Date(item.deadline) - new Date(item.task_start));
    item.dayDiff = Math.floor(millisDiff / (1000 * 60 * 60 * 24));
    $scope.color = (item.dayDiff > 1) ? 'red' : 'green'; 
    return item;
  });
   console.log($scope.itemArr)
   console.log($scope.color)
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<font ng-style="{'color':color}">working</font>
</div>

Answer 2

将颜色函数添加到项目对象，以便您可以在视图中调用它。

<td md-cell><font color="{{task.color()}}">{{ task.dayDiff }}</font></td>

function getAllTasks() {
  $http.get('db_files/tasksDB.php').then(function(response) {
    $scope.tasks = response.data;
    $scope.tasks = response.data.map(function(item) {
      var millisDiff = (new Date(item.deadline) - new Date(item.task_start));
      item.dayDiff = Math.floor(millisDiff / (1000 * 60 * 60 * 24));
      item.color = function() {
        return (item.dayDiff < 1) ? 'red' : 'green';
      };
      return item;
    });
  });
}