Umgang mit Schlüsselwertpaar

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); 
     } 
    } 

von oben Code, ich bin in der Lage Schlüssel und Werte in Array zu drücken, wenn Checkbox als true gesetzt ist. Die gleiche Sache, die ich machen wollte, wenn Glyphon Close als wahr und Glyphicon Open als False gesetzt wurde. Aber ich habe das Problem, dass glyphicon standardmäßig als true gesetzt ist und alle meine Schlüsselnamen standardmäßig in array verschoben werden. Wenn ich die Bedingung auf false setze, um glyphicon zu öffnen, funktioniert der Push nicht.

<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

Ich habe eine funktionierende unten Snippet. Es gibt bessere Möglichkeiten ng-class zu verwenden, aber ich werde gehen, dass Sie

<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

schreiben html wie es funktionieren wird

<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

ich die Lösung habe hier Sieh doch auch mal nach deinen Vorschlägen, es hat mir sehr geholfen.

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/