Question

是否可以使用ng-style和返回非布尔值的函数？

我希望根据我模型中的属性为不同的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种不同的背景颜色？

Answer 1

使用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;
}

js：

$scope.myClass = 'three' // or 'one', or 'two'

Answer 2

我刚刚尝试为您提供概念 - 如何实现您的目标，请根据您的需要更新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>

{{1}}

快乐帮助！

使用带有switch语句的ng-style - angular js

2 个答案: