angularjs - 我们如何使用 bootstrap 3 在 angular js 中显示/隐藏密码输入？

Question

我想使用 Bootstrap 3 在 angularjs 中显示/隐藏密码输入。

切换选项需要在输入中。

您能否提供一个片段或示例。

太感谢了。

Answer 1

AngularJS/UI 引导解决方案

使用 Bootstrap 的 has-feedback类以在输入字段内显示图标。

确保图标有 style="cursor: pointer; pointer-events: all;"

使用ng-if显示/隐藏 <label type="password"> 的不同形式对比 <label type="text">

HTML

<!-- index.html snippet -->    

<!-- show password as type="password" -->
<div ng-if="!showPassword"
       class="form-group has-feedback">
    <label>password</label>
    <input type="password"
           ng-model="params.password"
           class="form-control"
           placeholder="type something here...">
    <span ng-if="params.password"
          ng-click="toggleShowPassword()"
          class="glyphicon glyphicon-eye-open form-control-feedback" 
          style="cursor: pointer; pointer-events: all;">
    </span>
  </div>

  <!-- show password as type="text" -->
  <div ng-if="showPassword"
       class="form-group has-feedback">
    <label>password</label>
    <input type="text"
           ng-model="params.password"
           class="form-control"
           placeholder="type something here...">
    <span ng-if="params.password"
          ng-click="toggleShowPassword()"
          class="glyphicon glyphicon-eye-close form-control-feedback" 
          style="cursor: pointer; pointer-events: all;">
    </span>
  </div>

JavaScript

// app.js

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
    $scope.params = {};
    $scope.showPassword = false;
    $scope.toggleShowPassword = function() {
        $scope.showPassword = !$scope.showPassword;
    }
});

与 plunker 一起旋转: http://plnkr.co/edit/oCEfTa?p=preview