CODEWITHSUNDEEP
angularjs
Suny Saju
Suny Saju

Reputation: 165

how can hide and show li tag in angularjs?

I'm using angularjs 1.4.8. I'm trying to hide & show operation in <li>.

My code is given below:

<ul class="bk_crs_rslt">
  <li ng-repeat="c in courses"> 
    <h4>
      <a href="#" ng-click="show = !show"> {{c.CourseName }}
        <img src="image/bk_ad_btn.jpg" />
      </a>
    </h4>
    <p><span style="color:#337ab7;">{{c.CollegeName}}</span><br>{{c.CountryName}}</p>
    <p ng-show="show">
       <b>Tution Fee</b>     :  {{c.Fee}}<br>
       <b>Level</b>          :  {{c.LevelName}}<br>
       <b>Detail </b>        :  {{c.Detail}} <br>
       <b>Duration </b>      :   {{c.Duration}}<br>
       <b>Subject </b>       :  {{c.Subjec}}t<br>
       <b>IELTS Score </b>   :  {{c.Score}}<br />
     </p>
  </li>
</ul>

How can hide & show in <li> tag? plunker given here https://plnkr.co/edit/lsIypaBviXNvEi7Pwok4?p=info

its working in plunker but not working my solution?

Upvotes: 0

Views: 1000

Answers (1)

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

Try to use show as property

Like this

<ul class="bk_crs_rslt">
  <li ng-repeat="c in courses" >
    <h4><a href="#" ng-click="c.show = !c.show"> {{c.CourseName }}<img src="image/bk_ad_btn.jpg" /></a> </h4>
    <p ng-show="c.show"><span style="color:#337ab7;">{{c.CollegeName}}</span>
      <br>{{c.CountryName}}</p>
  </li>
</ul>

Upvotes: 1

Related Questions