1

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.

Improve this question

2 Answers 2

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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

Improve this answer

Comments