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 close设置为true并且glyphicon open设置为false时，我想要做同样的事情。但我面临的问题是，默认情况下glyphicon设置为true，默认情况下我的所有keyname都移入数组，如果我将条件设置为false以使glyphicon最初打开，则推送无效。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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/

处理键值对

3 个答案: