CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Laxmikant
Laxmikant

Reputation: 11

How to use ng-if inside ng-repeat over array?

I have an array or colors = ['Red', 'White', 'Gold', 'Black']; I was trying to do something like below code .. 

<span ng-repeat="color in item.colorOptions" ng-init="color">
    <lable ng-if="'Red' == {{color}}"> This is Red..</lable>
    <lable ng-if="'Black' == {{color}}"> This is Black..</lable>
</span>

Why I can not use ng-if like above code? what is a reason and what could be an alternative way to use ng-if or ng-show/hide here?

Upvotes: 1

Views: 190

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222700

It should be,

<span ng-repeat="color in item.colorOptions" ng-init="color">
    <lable ng-if="color === 'Red'"> This is Red..</lable>
    <lable ng-if="color === 'Black'"> This is Black..</lable>
</span>

DEMO

var myApp=angular.module('myApp',[])
 myApp.controller('myController',function($scope){
  $scope.item = {};
  $scope.item.colorOptions = ['Red', 'White', 'Gold', 'Black'];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app='myApp' ng-controller='myController'>
    <span ng-repeat="color in item.colorOptions" ng-init="color">
    <lable ng-if="color === 'Red'"> This is Red..</lable>
    <lable ng-if="color === 'Black'"> This is Black..</lable>
</span> 
</div>

Upvotes: 1

Related Questions