Angularjsの値に基づいてグリフィコンアイを表示する方法は？

Question

フォームのすべてのフィールドにグリフコンアイがあります。ユーザーがglyphicon-eye-openをクリックすると、glyphicon-eye-closeに変わり、その特定のフィールド名を配列にプッシュします。

私のJSONレスポンスでは、非表示のフィールド値を取得していますが、どうすればその値を使用し、正確なグリフコンアイを呼び出すことができます。

JSONレスポンス：

{ 
    "response": { 
    "status": { 
     "code": "0", 
     "message": "Success" 
    }, 
    "service": { 
     "servicetype": "4", 
     "functiontype": "1005" 
    }, 
    "data": { 
     "session_id": "372", 
     "roles": [ 
     { 
     "hiddenfields": [ 
      { 
      "fname": "firstname", 
      "fblink": "fblink", 
      "country": "country", 
      "martialStatus": "martialStatus" 
      } 
     ] 
     } 
     ] 
    } 
    } 
} 

コントローラー：

$scope.user = { 
      fname: "firstname", 
      lname: "lastname", 
      dob: "dob", 
      gender: "gender", 
      country: "country", 
      state: "state", 
      city: "city", 
      pincode: "pincode", 
      martialStatus: "martialStatus", 
      emailId: "emailId", 
      mobile: "mobile", 
      qualification: "qualification", 
      fblink: "fblink" 

     }; 

     $scope.allow = {}; 

     $scope.users = []; 

     $scope.push = function(){ 
      $scope.users = []; 
      var user = {}, 
       allow = $scope.allow; 
      console.log(allow); 
      Object.keys(allow).forEach(function(key){ 
      allow[key] ? user[key] = $scope.user[key] : null; 
      }); 
      $scope.users.push(user); 
     } 

HTML：

<a class="menu-toggle" class="btn btn-default" ng-model="allow.fname"><i class="glyphicon" ng-class="{'glyphicon-eye-open':allow.fname, 'glyphicon-eye-close':!allow.fname}" ng-click="push(allow.fname = allow.fname?false:true)"></i></a> 

場合、フィールドVA lueが配列になっていればグリフコンアイクローズを表示する必要があります。

Answer 1

何度か！ ng-clssの中ではうまくいきません。あなたはそれを置き換えてください。

<a class="menu-toggle" class="btn btn-default" ng-model="allow.fname"> 
    <i class="glyphicon" 
    ng-class="{'glyphicon-eye-open':allow.fname.length > 0, 'glyphicon-eye-close':allow.fname.length == 0}" 
    ng-click="push(allow.fname = allow.fname?false:true)"> 
    </i> 
</a> 

Answer 2

以下のようにng-classを使用できます。

<div class="form-group" ng-repeat="x in allow" > 
     <button class="btn btn-default"><span class="glyphicon" ng-class="{ 'glyphicon-eye-open': x.fname==0 , 'glyphicon-eye-close': x.fname==1}"></span> {{x.name}}</button> 
</div> 

function myCtrl($scope) { 
 
    $scope.allow=[{ 
 
     'fname':1, 
 
     'name':'Anil' 
 
    },{ 
 
     'fname':0, 
 
     'name':'Sunil' 
 
    },{ 
 
     'fname':1, 
 
     'name':'Manil' 
 
    }] 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div ng-app ng-controller="myCtrl" class="col-md-12"> 
 
    <div class="form-group" ng-repeat="x in allow" > 
 
     <button class="btn btn-default"><span class="glyphicon" ng-class="{ 'glyphicon-eye-open': x.fname==0 , 'glyphicon-eye-close': x.fname==1}"></span> {{x.name}}</button> 
 
    </div> 
 
</div>

Answer 3

私は

$scope.allow = response.data.roles[0].hiddenfields[0];