How to show glyphicon eye based on value in Angularjs? - 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.
In my JSON response I am getting the hidden field values but how can I use that value and call exact glyphicon-eye.
JSON response :
{
"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"
}
]
}
]
}
}
}
Controller :
$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>
If field value is in array then I need to show glyphicon-eye-close.

Answer 1

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>

Answer 2

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 3

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