AngularJS试图将一个类添加到多个值,如果它在ng-repeat上为真


AngularJS trying to add a class to multiple values if it is true on ng-repeat

我很难找到有关此事的任何资源,我希望有人可以帮助我。

我目前正在从数据库中提取信息,并使用 AngularJS 根据特定过滤器执行 ng-repeat。

<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
    <td>{{data.name}}</td>
    <td>{{data.id}}</td>
    <td>{{data.status}}</td>
</tr>

基于此,我正在尝试添加一个类来根据返回的内容更改 {{data.status}} 的背景。 我可以举个例子吗

 if data.status=="TEST" then add class "alert-success"
 else if data.status=="NEW" then add class "alert-info"
 else if data.status=="JUNK" then add class "alert-danger"
 else ""

等等。 提前谢谢你。

只是为了让你看到我当前的控制器是什么样子

app.controller('test', function ($scope, $http, $timeout) {
$http.get('ajax/test.php').success(function(data){
    $scope.list = data;
    $scope.currentPage = 1; //current page
    $scope.entryLimit = 100; //max no of items to display in a page
    $scope.filteredItems = $scope.list.length; //Initially for no filter
    $scope.totalItems = $scope.list.length;
});
$scope.setPage = function(pageNo) {
    $scope.currentPage = pageNo;
};
$scope.filter = function() {
    $timeout(function() {
        $scope.filteredItems = $scope.filtered.length;
    }, 10);
};
$scope.sort_by = function(predicate) {
    $scope.predicate = predicate;
    $scope.reverse = !$scope.reverse;
};
});

AngularJS带有一个名为ng-class的内置指令,它完全符合您的需求。应用于您的示例请求:

<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
    <td>{{data.name}}</td>
    <td>{{data.id}}</td>
    <td ng-class=" { 'alert-success': data.status=='TEST', 'alert-info': data.status=='NEW', 'alert-danger': data.status=='JUNK' } ">{{data.status}}</td
</tr>