обработки пара ключей значение

Question

HTML:

<input type="text" ng-model="user.fname" ng-disabled="!allow.fname"/> 
<input type="checkbox" ng-model="allow.fname" /> 
<hr/> 
<input type="text" ng-model="user.lname" ng-disabled="!allow.lname"/> 
<input type="checkbox" ng-model="allow.lname" /> 
<hr/> 
<input type="text" ng-model="user.sname" ng-disabled="!allow.sname"/> 
<input type="checkbox" ng-model="allow.sname" /> 

JS:

function MyCtrl($scope) { 
     $scope.user = { 
      fname: 'First name', 
      lname: 'Last name', 
      sname: 'Surname' 
     }; 

     $scope.allow = { 
      fname : true, 
      lname : true, 
      sname : true, 
     }; 

     $scope.users = []; 

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

Используя выше код, я могу нажать клавишу и значения в массиве, когда флажок установлен, как верно. То же самое, что я хотел сделать, когда закрытие глификона установлено как true, а glyphicon open установлено как false. Но я столкнулся с проблемой, что по умолчанию глификон установлен как истинный, и все мои ключевые слова по умолчанию переходят в массив, если я устанавливаю условие как false, чтобы сначала сделать глификон открытым, нажатие не работает.

<script>$('#menu-toggle').click(function(){ 
    $(this).find('i').toggleClass('glyphicon glyphicon-eye-open').toggleClass('glyphicon glyphicon-eye-close'); 
});</script>  

Html:

JS: 

    $scope.hiddenFields = function() { 


      var data = $scope.dataArray[0]; 


      var keyArray = ["firstname", "lastname", "dob"]; 

      if($scope.afname == true) { 
        $scope.hide.push("firstname"); 
        console.log($scope.hide); 
       } 
}; 

http://jsfiddle.net/cbrz2qac/

Answer 1

Я добавил рабочий фрагмент кода ниже. Есть лучшие способы использования ng-class, но я оставлю это вам

<input type="text" ng-model="user.fname" ng-disabled="!allow.fname"/> 
<input type="checkbox" ng-model="allow.fname" /> 
<label ng-class="{'glyphicon glyphicon-eye-open': allow.fname, 'glyphicon glyphicon-eye-close': !allow.fname }"></label> 

var myApp = angular.module('myApp',[]); 
 

 
function MyCtrl($scope) { 
 
    $scope.user = { 
 
    \t fname: 'First name', 
 
     lname: 'Last name', 
 
     sname: 'Surname' 
 
    }; 
 
    
 
    $scope.allow = { 
 
    \t fname : true, 
 
     lname : true, 
 
     sname : true, 
 
    }; 
 
    
 
    $scope.users = []; 
 
    
 
    $scope.push = function(){ 
 
    \t var user = {}, 
 
     \t \t allow = $scope.allow; 
 
     Object.keys(allow).forEach(function(key){ 
 
     \t allow[key] ? user[key] = $scope.user[key] : null; 
 
     }); 
 
     $scope.users.push(user); 
 
    } 
 
}

input[type=checkbox] { 
 
display: none; 
 
}

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

 
<div ng-app='myApp' ng-controller="MyCtrl"> 
 
    <input type="text" ng-model="user.fname" ng-disabled="!allow.fname"/> 
 
    
 
    <label ng-class="{'glyphicon glyphicon-eye-open': !allow.fname, 'glyphicon glyphicon-eye-close': allow.fname }"><input type="checkbox" ng-model="allow.fname" /> </label> 
 
    <hr/> 
 
    <input type="text" ng-model="user.lname" ng-disabled="!allow.lname"/> 
 
    <input type="checkbox" ng-model="allow.lname" /> 
 
    <label ng-class="{'glyphicon glyphicon-eye-open': !allow.lname, 'glyphicon glyphicon-eye-close': allow.lname }"> <input type="checkbox" ng-model="allow.lname" /> </label> 
 
    <hr/> 
 
    <input type="text" ng-model="user.sname" ng-disabled="!allow.sname"/> 
 
    
 
    <label ng-class="{'glyphicon glyphicon-eye-open': !allow.sname, 'glyphicon glyphicon-eye-close': allow.sname }"><input type="checkbox" ng-model="allow.sname" /> </label> 
 
    <hr/> 
 
    <button ng-click="push()">Push It</button> 
 
    <br/> 
 
    <label>Results</label> 
 
    <ul ng-repeat="u in users"> 
 
    <li>{{u}}</li> 
 
    </ul> 
 
</div>

Answer 2

написать HTML, как он будет работать

<head> 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<div ng-controller="MyCtrl"> 

    <input type="text" ng-model="user.fname" ng-disabled="!allow.fname"/> 
    <span ng-show="allow.fname" class="glyphicon glyphicon-eye-open"></span> 
    <span ng-show="!allow.fname" class="glyphicon glyphicon-eye-close"></span> 
    <input type="checkbox" ng-model="allow.fname" /> 
    <hr/> 
    <input type="text" ng-model="user.lname" ng-disabled="!allow.lname"/> 
    <span ng-show="allow.lname" class="glyphicon glyphicon-eye-open"></span> 
    <span ng-show="!allow.lname" class="glyphicon glyphicon-eye-close"></span> 
    <input type="checkbox" ng-model="allow.lname" /> 
    <hr/> 
    <input type="text" ng-model="user.sname" ng-disabled="!allow.sname"/> 
    <span ng-show="allow.sname" class="glyphicon glyphicon-eye-open"></span> 
    <span ng-show="!allow.sname" class="glyphicon glyphicon-eye-close"></span> 
    <input type="checkbox" ng-model="allow.sname" /> 
    <hr/> 
    <button ng-click="push()">Push It</button> 
    <br/> 
    <label>Results</label> 
    <ul ng-repeat="u in users"> 
    <li>{{u}}</li> 

Answer 3

Я получил решение здесь , Взгляните в любом случае, спасибо за ваши предложения, это очень помогло мне.

HTML:

<div ng-controller="MyCtrl"> 
    <input type="text" ng-model="user.fname" ng-disabled="!allow.fname"/> 

    <label ng-class="{'glyphicon glyphicon-eye-close': allow.fname, 'glyphicon glyphicon-eye-open': !allow.fname }"><input type="checkbox" ng-model="allow.fname" /> </label> 
    <hr/> 
    <input type="text" ng-model="user.lname" ng-disabled="!allow.lname"/> 
    <input type="checkbox" ng-model="allow.lname" /> 
    <label ng-class="{'glyphicon glyphicon-eye-open': !allow.lname, 'glyphicon glyphicon-eye-close': allow.lname }"> <input type="checkbox" ng-model="allow.lname" /> </label> 
    <hr/> 
    <input type="text" ng-model="user.sname" ng-disabled="!allow.sname"/> 

    <label ng-class="{'glyphicon glyphicon-eye-open': !allow.sname, 'glyphicon glyphicon-eye-close': allow.sname }"><input type="checkbox" ng-model="allow.sname" /> </label> 
    <hr/> 
    <button ng-click="push()">Push It</button> 
    <br/> 
    <label>Results</label> 
    <ul ng-repeat="u in users"> 
    <li>{{u}}</li> 
    </ul> 
</div> 

JS:

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
    $scope.user = { 
     fname: 'First name', 
     lname: 'Last name', 
     sname: 'Surname' 
    }; 

    $scope.allow = { 
     fname : true, 
     lname : true, 
     sname : true, 
    }; 

    $scope.users = []; 

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

http://jsfiddle.net/cbrz2qac/13/