CODEWITHSUNDEEP
angularjs
user7364287
user7364287

Reputation:

ng-if condition in angularJs

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.

Upvotes: 1

Views: 145

Answers (2)

techie_questie
techie_questie

Reputation: 1522

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 :)

Upvotes: 0

developer
developer

Reputation: 60

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>

Upvotes: 2

Related Questions