angularjsangularjs-ng-repeatangularjs-ng-class

How to use ng-src when there are more conditions to check?

I have 10 icons where each one for different types of alerts. I'm getting the type value from a service. I need to change the icon and style of text based on the type I'm getting from service. I'm using ng-src for changing the images.

    <div ng-src="{{type=='0' : 'img1.png' : (type=='1' : 'img2.png' : ())}}"></div>
    <div ng-class="{{class1: type=='1'}}">Some text</div>

Is there a better way to do this?

Solution

  • You can just set the icon img source in controller. Or even set the img source like:

    $scope.iconSrc = "img" + type + ".png";

    And use in template. Same login for class.