How to show glyphicon eye based on value in Angularjs?

Question

I have glyphicon-eye for all fields in the form. If user click on glyphicon-eye-open then it will change to glyphicon-eye-close and I push that specific field name into an array

Answer 1

Some times the ! doesnot works inside ng-clss. You please replace that by

<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

I am now able to glyphicon based on values by assigning the response to my model as below,

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

Answer 3

You can use ng-class like below.

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