如何在Angularjs中打开或关闭glyphicon-eye?

时间:2016-10-27 07:28:08

标签: angularjs

在我使用glyphicon-eye的每个字段的表单中,如果用户点击该眼睛打开图标,则它应该变为闭眼。

我需要在ng-click期间调用一个函数,如果眼睛关闭,那么我需要将该字段名称作为数组内的键传递。

<input  type="text" name="fname" class="form-control1" autocomplete="off" ng-required="true" ng-model="model.firstName" ng-pattern="/^[a-zA-Z ]*$/" ng-minlength =1 placeholder="First Name"/>
    <a id="menu-toggle" ng-click="hiddenFileds()" ng-model="model.fnamei" class="btn btn-default"><i class="glyphicon glyphicon-eye-open"></i></a>

<input  type="text" name="lname" class="form-control1" autocomplete="off" ng-required="true" ng-model="model.lastName" ng-pattern="/^[a-zA-Z ]*$/" ng-minlength =1 placeholder="Last Name"/>
     <a id="menu-toggle" ng-click="hide()" class="btn btn-default"><i class="glyphicon glyphicon-eye-open"></i></a>

2 个答案:

答案 0 :(得分:1)

试试这个

<input  type="text" name="fname" class="form-control1" autocomplete="off" ng-required="true" ng-model="model.firstName" ng-pattern="/^[a-zA-Z ]*$/" ng-minlength =1 placeholder="First Name"/>

<a id="menu-toggle" ng-click="hideName = (hideName?false:true)" class="btn btn-default"><i class="glyphicon" ng-class="{'glyphicon-eye-open':!hideName, 'glyphicon-eye-close':hideName}"></i></a>

答案 1 :(得分:0)

谢谢@Jihin Raju。它的工作,但我遇到了一些CSS问题。所以我使用下面的代码,现在它工作正常。

$scope.user = {
        fname: "firstname",  
        lname: "lastname"
    };

    $scope.allow = {};

    $scope.users = [];

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

我使用输入类型=&#34;复选框&#34;而不是href。和标签

<label ng-class="{'glyphicon glyphicon-eye-close': allow.fname, 'glyphicon glyphicon-eye-open': !allow.fname}" ng-click="push(allow.fname = allow.fname?false:true)"><input class="eyecheck" type="checkbox" ng-model="allow.fname" ng-hide="allow.fname || !allow.fname"/></label>