如何在 Angularjs 中根据值显示字形眼睛?

2023-12-26

我对表单中的所有字段都有字形眼。如果用户单击 glyphicon-eye-open,那么它将更改为 glyphicon-eye-close,然后我将该特定字段名称推送到数组中。

在我的 JSON 响应中,我获取了隐藏字段值,但如何使用该值并调用精确的 glyphicon-eye。

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>

如果字段值在数组中,那么我需要显示 glyphicon-eye-close。


您可以像下面一样使用 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Angularjs 中根据值显示字形眼睛? 的相关文章

随机推荐