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

Question

I am having a hard time finding any resources on this matter and I was hoping somebody could help me.

I am currently pulling information from a DB and using AngularJS to do a ng-repeat based on specific filters.

<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>

Based on this I am trying to add a class to change the background of {{data.status}} based on what is returned. Could I possibly get an example of

 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 ""

and so on. Thank you ahead of time.

Just so you can see what my current controller looks like

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

});

Deniz Saner · Accepted Answer · 2016-01-18 21:50:06Z

2

AngularJS comes with a built-in directive called ng-class, which does exactly what you are looking for. Applied to your example request:

<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>

edited Jan 18, 2016 at 21:50

answered Jan 14, 2016 at 18:35

Deniz Saner

4371 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robert Lee Over a year ago

Your code got me to the right place. Please update your ng-class to have brackets that was necessary for the code and I will put it as the solution. Thank you for your help.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related