Angularjs: - изменение кнопки на основе JSON данных

Question

Привет Я работаю над проектом на основе angularjs и загрузка данных json..There проблема я застрял с и не получить решение ..

ниже приведен код HTML: -

<div owl-carousel-item="" ng-repeat="profile in updatedProfile" ng-if= "profile.show"> 
    <!-- Panel in owl carousel --> 
    <div id="discover " ng-class="discover_image"> 
     <li style="margin-left:0px; margin-right:0px"> 
      <div class="thumbnail_photo"> 
       <button class="close" ng-click="remove(profile)"><span class="glyphicon glyphicon-remove"></span></button> 
       <a href="#/discover/{{profile.basic.username}} " target="_blank"><span class="discover_pic_container" style="background:url({{profile.photo_details.photos[0].domain_name+profile.photo_details.photos[0].medium}}) no-repeat center top"></span></a> 
       <div class="discover_transparent"> 
        <div class="discover_name">{{profile.basic.display_name }}</div> 
       </div> 
      </div> 
      <div class="recent_join_user_info">23 yrs, 5'4", Gujarati, Hindu Mumbai, India</div> 
      <button class="discover_connect_btn btn btn-lg " ng-click="connect(profile)" ng-if="member">Connect</button> 
     </li> 
    </div> 
</div> 

ниже мой код контроллера сниппет: -

AppControllers.controller('ProfileListCtrl', ['$scope', 'ProfileData', '$timeout', function($scope, ProfileData, $timeout) { 

    //Profile data above is a factory created to connect with the discovery.json 
    var promise = ProfileData.query(); 
    promise.$promise.then(function(response) { 

     $scope.profile = response.data; 
    //  console.log($scope.profile); 
     var profile = $scope.profile; 
     for (i = 0; i < profile.length; i++) { 

      // console.log(data[0].account.membership) 
      profile[i]["show"] = true; 
      // console.log(profile[i]); 
      //console.log(profile[i].account.membership) 

      if(profile[i].account.membership == "free") 
       { 
        console.log("This account is free"); 
        $scope.member=true; 
       } 
      else if(profile[i].account.membership == "premium") 
       { 
        console.log("This acocunti snot"); 
        $scope.member=false; 
       } 
      else 
      { 
      console.log("unknown member") 
      } 

     } 

     $scope.alert_message = "Sorry! You don't have any Shortlisted Profile to check"; 
     $scope.seeAllUrl = "member_who_shortlisted_you"; 
     // Get the size of an object 
     var totalNumberOfProfile = profile.length; 


     //console.log(totalNumberOfProfile); 
     $scope.totalNumberOfProfile = totalNumberOfProfile; 
     $scope.categoryOfProfile = "Member Who Shortlisted You"; 

Теперь я хочу, чтобы изменить кнопку в зависимости от членства счета я получаю от JSON е Ile ..

По default it is Connect but have three more button for different conditions ..

Я пытался использовать нг-если и застрять и понятия не имеют, как изменить кнопки на основе данных ..

Я новичок на angular..please помочь мне out..Thanks

Answer 1

Если вы хотите быстро исправить, используйте «если» условия, такие как следующий

<div ng-if="member=='true'"> 
<button>Button_1</button> 
</div> 

<div ng-if="member=='false'"> 
<button>Button_2</button> 
</div> 

Answer 2

Если у вас есть более одного конд ition для кнопки пользователя "нг-переключатель":

<ANY ng-switch="expression"> 
< <ANY ng-switch-when="matchValue1">...</ANY> 
    <ANY ng-switch-when="matchValue2">...</ANY> 
    <ANY ng-switch-default>...</ANY> 
</ANY> 

угловые документы: https://docs.angularjs.org/api/ng/directive/ngSwitch

Answer 3

Как предполагалось ранее, вы можете использовать ng-switch.

Живой пример на jsfiddle.

<form name="ExampleForm" id="ExampleForm"> 
<select ng-model="condition"> 
<option value="1">Condition one</option> 
<option value="2">Condition two</option> 
<option value="3">Condition three</option> 
</select> 
<div ng-switch="condition"> 
    <button ng-switch-when="1"> 
    Condition one! 
    </button> 
    <button ng-switch-when="2"> 
    Condition two! 
    </button> 
    <button ng-switch-when="3"> 
    Condition three! 
    </button> 
</div> 
</form> 

ОБНОВЛЕНО

Живой пример на jsfiddle.

<form name="ExampleForm" id="ExampleForm"> 
    <div ng-repeat="profile in profiles"> 
    Yor profile is {{profile.account.membership}} 
    <div ng-switch="profile.account.membership"> 
     <button ng-switch-when="free"> 
     free profile! 
     </button> 
     <button ng-switch-when="premium"> 
     premium profile! 
     </button> 
     <button ng-switch-when="unknow"> 
     unknow profile! 
     </button> 
    </div> 
    </div> 
</form> 

И JS

.controller('ExampleController', function($scope) { 
$scope.condition = '1'; 
$scope.profiles = [{ 
    account: { 
    membership: "free" 
    } 
}, 
{ 
    account: { 
    membership: "premium" 
    } 
}, 
{ 
    account: { 
    membership: "unknow" 
    } 
}];});