如何使用bootstrap 3在角度js中显示/隐藏密码输入？

Question

我想使用bootstrap 3在角度js中显示/隐藏密码输入,切换选项需要在输入内部.你能提供一个片段或例子吗？太感谢了.

Answer 1

您可以使用ng-attr-type指令动态更改输入类型.例如:

<input ng-attr-type="{{ showPassword ? 'text' : 'password' }}">

您可以将showPassword绑定到click事件并进行切换.

更新(来自@ Ferie的评论):

HTML

<span class="showPassword" ng-click="togglePassword()">{{ typePassword ? 'Hide' : 'Show' }}</span><br> <input type="{{ typePassword ? 'text' : 'password' }}" name="password" placeholder="Password"> 

在角度控制器中

$scope.togglePassword = function () { $scope.typePassword = !$scope.typePassword; };

Answer 2

AngularJS/UI Bootstrap解决方案

• 使用Bootstrap的has-feedback类在输入字段中显示一个图标.
• 确保图标有 style="cursor: pointer; pointer-events: all;"
• 使用ng-if显示/隐藏不同的形式,其中<label type="password">VS<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

Answer 3

你可以干脆做

<input ng-show="showpassword" type="text" ng-model="password">
<input ng-hide="showpassword" type="password" ng-model="password">
<input type="checkbox" ng-model="showpassword" ng-checked="false">

在这里阅读

Answer 4

这是一个有效的演示:

var app = angular.module('myApp', []);
app.controller('loginCtrl', function($scope) {
  $scope.showPassword = false;

  $scope.toggleShowPassword = function() {
    $scope.showPassword = !$scope.showPassword;
  }

});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="form" ng-app="myApp" ng-controller="loginCtrl" novalidate>
  <label>
    Password:

    <input type="password" name="password" ng-model="password" ng-attr-type="{{ showPassword ? 'text':'password'}}" />
    <div ng-click="toggleShowPassword()" ng-class="{'fa fa-eye': showPassword,'fa fa-eye-slash': !showPassword}" style="cursor: pointer;"></div>

  </label>
</form>