Show a region on page if data from json equal to true with Ionic and Angular

Question

I'm creating an ionic app and there are variables I request from a php page through the Ionic controller. From the variables I get, I have a field called active which either be yes or no for each user after log on. What I want to achieve is, there is a div on the page called "activediv" and I want that div show only if the variable from the json = yes.

.controller('useraccount_ctrl', ['$scope', '$http', function($scope, $http) {
   $http.get('http://localhost/myapp/app_ion/templates/user/user_account.php').success(function(data) {
       $scope.userdata = (data);
   });
}])

HTML

<ion-content class="has-subheader"> 

<ion-list class="list card" ng-repeat="item in userdata">
   <ion-item href="#/tab/source/{{item.profile_id}}">
 <div class="item item-avatar-big">
<img src="../usr_up_img/{{item.profile_pix}}">
    <h2>{{item.fname}}</h2>
    <p>{{item.country}}</p>
    <p>{{item.curr_city}}</p>
  <div id="activediv">{{item.active}}</div>
  </div>
   </ion-item>
  </ion-list>

  </ion-content>

JSON

[{"fname":"Nicholas","country":"India","curr_city":"East Legon","profile_id":"1298","profile_pix":"173333297082.jpg","active":"yes"}] 

Answer 1

尝试这个

<div id="activediv" ng-if ="item.active == 'yes'">{{item.active}}</div>

Answer 2

use ng-if

<ion-content class="has-subheader"> 

<ion-list class="list card" ng-repeat="item in userdata">
<ion-item href="#/tab/source/{{item.profile_id}}">
<div class="item item-avatar-big">
<img ng-if ="item.profile_pix && item.active =='yes'" src="../usr_up_img/{{item.profile_pix}}">
<h2 ng-if ="item.fname && item.active =='yes'">{{item.fname}}</h2>
<p ng-if ="item.country && item.active =='yes'">{{item.country}}</p>
<p ng-if ="item.curr_city && item.active =='yes'">{{item.curr_city}}</p>
<div id="activediv" ng-if ="item.active =='yes'">{{item.active}}</div>
</div>
</ion-item>
</ion-list>

Answer 3

Pravesh's answer is good.

You can also use ng-show and it will just hide or show your div's content:

<div id="activediv" ng-show="item.active == 'yes'">{{item.active}}</div>