ng-if condition in angularJs

Question

I am new in AngularJS and try to do hide show in angularJs.

Below is my Code :

 <ul class="recent-rate-list">
 <li ng-repeat="ratedType in ratedTypes">
 <a href="#" style="line-height:30px">{{ratedType.type}}</a>
 </li>
 </ul>

AngularJS :

 $scope.ratedTypes = [
 {
 type: 'Select All',
 "value": '0',
 isSelected : true
 }, {
 type: 'Option 1',
 "value": '1',
 isSelected: false
 }, {
 type: 'Option 2',
 "value": '2',
 isSelected: false
 },{
 type: 'Option 3',
 "value": '3',
 isSelected: false
 },
 ];

Where I need when isSelected = true then

 <a href="#" style="line-height:30px"><span>{{ratedType.type}}</span></a>

and when isSelected = false then

 <a href="#" style="line-height:30px">{{ratedType.type}}</a>

I know angularJs has ng-if, but I unable to use it. How can I solve it using ng-if?

Thanks.

Answer 1

You can put ng-if condition inside the div tag.

<div ng-if="isSelected === true"><a href="#" style="line-height:30px"><span>{{ratedType.type}}</span></a></div>
 <div ng-if="isSelected === false"><a href="#" style="line-height:30px">{{ratedType.type}}</a><div>

Answer 2

You can rather add like this-

<div ng-if="isSelected"><a href="#" style="line-height:30px"><span>{{ratedType.type}}</span></a></div>
 <div ng-if="!isSelected"><a href="#" style="line-height:30px">{{ratedType.type}}</a><div>

and in your controller define-

$scope.isSelected = false;

Hope this helps :)