0

I have a list of classrooms with each a subarray of actions to be done to the classroom.

{
"id": 1,
"name": "GR302",    
"actions": [
  {
    "date": "19/04/2011",        
    "deadline": "21/04/2011",
    "priority": "high"
  },
  {
    "date": "15/01/2012",        
    "deadline": "20/12/2014",
    "priority": "low"
  }
],

}

I made a list with ng-repeat: room in rooms and in there another ng-repeat: action in room.actions. Now I'd love to place a flag next to the name of the room where there is an action with high priority. But I have no idea how, I'm a beginner with AngularJS. The only thing I could think of is using ng-model & ng-class?

<h4>{{room.name}} <span class="glyphicon" ng-class="(something) ? 'glyphicon-flag' : ''"></span></h4>

1 Answer 1

1

You could do it in a lot of different ways, ng-class is flexible enough to take a range of expressions, object, array and string.

You could do:-

 ng-class="{'glyphicon-flag' : action.priority == 'high'}"

Or

 <!--More flexible version, Here you can add more key value pairs if you need to specify different classes for different priority-->
 ng-class="{'high' : 'glyphicon-flag'}[action.priority]" 

Or

 ng-class="{true, 'glyphicon-flag'}[action.priority == 'high']"

Or even with the expression

  ng-class="action.priority == 'high' ?  'glyphicon-flag' : ''"

If you want to do this one level above then:

In your controller create a function on the scope:

 $scope.isFlagged = function(actions){
    if(!angular.isArray(actions)) return false;

    return actions.some(function(action){
       return action.priority === 'high';
    });
 }

and in your view just do:-

ng-class="{true, 'glyphicon-flag'}[isFlagged(room.actions)]"

Or if the number of actions does not change dynamically in your case for every room then you should just add a property in your controller while setting up the view model for rooms, which will be more performance effective.

Example:-

angular.forEach($scope.rooms , function(room) {
    room.isFlagged = isFlagged(room.actions); //Add a property on the room object
});

function isFlagged(actions){
    if(!angular.isArray(actions)) return false;

    return actions.some(function(action){
       return action.priority === 'high';
    });
 }

and just use the flag in your ng-class expression.


The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.

Also see Array.some and its shim for older browsers.

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

1 Comment

Thx! It did the trick, with a little expression error though :) ng-class="{true: 'glyphicon-flag'}[isFlagged(room.actions)]"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.