使用ng样式的开关语句-角js
使用ng样式的开关语句-角js
提问于 2016-02-02 11:18:46
是否可以将ng样式与返回非布尔值的函数一起使用？
我想根据我的模型中的一个属性给bg涂上不同的颜色，我设法做到了。
<tr ng-repeat="issue in data.issues|orderBy:orderByField:reverseSort" ng-style="{'background-color': isToday(issue.due_date) ? 'red': 'yellow'}" >
...
主计长：
$scope.isToday = function (compareDate) {
var today = $scope.today;
return compareDate < today.getFullYear() + '-' + today.getDate() + '-' + today.getMonth();
}其中，isToday函数返回布尔值。
如何处理函数返回3个值(或更多)的情况，并且希望根据其结果有3种不同的背景色？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-02 11:28:43
使用ngClass。模板：
<tr ng-repeat="issue in data.issues|orderBy:orderByField:reverseSort" ng-class="{{ myClass }}" >css：
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: green;
}联署材料：
$scope.myClass = 'three' // or 'one', or 'two'Stack Overflow用户
发布于 2016-02-02 13:05:31
我刚刚试着给你一个概念--如何实现你想要的东西，请根据你的需要更新someFun功能，如date等。
下面的示例只是尝试根据条件评估来放置不同的类。如果您需要修改，请让我知道我会做正确的方式。
angular.module('app', [])
.controller('ctrl', function ($scope) {
//sample items
$scope.items = ['One',
'Two',
'Three',
'Four',
'Five',
'Six',
'Seven',
'Eight',
'Nine'];
//this is function where multiple condtions will be handled
$scope.someFunc = function(index, cond){
//some sample conditions, write here according to your requirements
if(index >6 && index%22 && cond == 'c')
return true;
if(index%2 && cond == 'a')
return true;
if(index%3 && cond == 'b')
return true;
else return false;
}
});.green{
background-color:green;
border: 1px solid white;
color:white;
}
.blue{
background-color:blue;
border: 1px solid white;
}
.red{
background-color:red;
border: 1px solid white;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="item in items" ng-class="{ 'blue': someFunc($index, 'a'), 'green': someFunc($index, 'b'), 'red': someFunc($index, 'c') }"> {{item}}
</div>
</div>
乐于助人！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35151993
复制相关文章
相似问题
腾讯云开发者
