当条件(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>
我想做类似的事情:如果有一天离开,那么在绿色上将其他颜色的文字换色。
答案 0 :(得分: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)
})
&#13;
<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>
&#13;
答案 1 :(得分:1)
将颜色功能添加到项目对象,以便您可以在视图中调用它。
<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;
});
});
}