angularjs if statements?

So I'm running through the tutorial for AngularJS:

I have an array defined in the controller and i'm returning different points in the array by calling when i'm looping through ng-repeat {{feature.name}} {{feature.description}}

What i don't understand is lets say i have a third point in the array called "importance" and it's a number from 1 to 10. I don't want to display that number in the html but what i do want to do is apply a different color to the feature if that "importance" number in the array is 10 vs 1

so how do i write an if statement to do this:

i.e.

{{feature.description}}

no idea if that's right but that's what i want to do

Answer

This first one is a directive that evaluates whether something should be in the DOM only once and adds no watch listeners to the page:

angular.module('setIf',[]).directive('setIf',function () {
    return {
      transclude: 'element',
      priority: 1000,
      terminal: true,

      restrict: 'A',
      compile: function (element, attr, linker) {
        return function (scope, iterStartElement, attr) {
          if(attr.waitFor) {
            var wait = scope.$watch(attr.waitFor,function(nv,ov){
              if(nv) {
                build();
                wait();
              }
            });

          } else {
            build();
          }

          function build() {
            iterStartElement[0].doNotMove = true;
            var expression = attr.setIf;
            var value = scope.$eval(expression);
            if (value) {
              linker(scope, function (clone) {

                iterStartElement.after(clone);
                clone.removeAttr('set-if');
                clone.removeAttr('wait-for');
              });
            }
          }
        };
      }
    };
  });

This second one is a directive that conditionally applies attributes to elements only once without watch listeners:

i.e.

angular.module('setAttr',[]).directive('setAttr', function() {
  return {

    restrict: 'A',
    priority: 100,
    link: function(scope,elem,attrs) {
      if(attrs.setAttr.indexOf('{') != -1 && attrs.setAttr.indexOf('}') != -1) {
      //you could just angular.isObject(scope.$eval(attrs.setAttr)) for the above but I needed it this way
        var data = scope.$eval(attrs.setAttr);

        angular.forEach(data, function(v,k){

          if(angular.isObject(v)) {

            if(v.value && v.condition) {
                elem.attr(k,v.value);
                elem.removeAttr('set-attr');
            }
          } else {
            elem.attr(k,v);
            elem.removeAttr('set-attr');
          }
        });
      }

    }
  }
});

Of course your can use dynamic versions built into angular:

You can also use the new ng-if added by angularjs which basically replaces ui-if created by the angularui team these will conditionally add and remove things from the DOM and add watch listeners to keep evaluating: