将密码取消屏蔽为纯文本，然后在单击复选框时再次屏蔽它答案

【问题标题】：Unmask Password to plain text and again mask it upon clicking a checkbox将密码取消屏蔽为纯文本，然后在单击复选框时再次屏蔽它
【发布时间】：2016-10-30 05:58:43
【问题描述】：

在我的基于 Angular mvc 的应用程序中，我在 html5 中有一个密码类型输入元素，如下所示。

我需要在此附近有一个复选框，当用户单击 chekcbox 时，我们在代码下方的相同密码输入类型文本框中将屏蔽的密码文本显示为纯文本。同样，当用户取消选中复选框时，我们应该将纯文本屏蔽为屏蔽:) 看起来很简单，我是新来的，有人可以帮我提供可能的代码

 <input type="password" name="password"
                               ng-model="model.password"
                               placeholder="Please type your password">

【问题讨论】：

$('#c').click(function () { if ($(this).is(':checked')) { $('#p').attr('type', 'text'); } else { $('#p').attr('type', 'password'); } })，其中 ckeckbox 有 id="c"，文本框有 id="p"

标签： .net angularjs asp.net-mvc html model-view-controller

【解决方案1】：

您可以简单地使用ng-show 或ng-if 指令来处理您的情况。

通过下面的 sn-p 不同类型的输入将在 dom 上切换。

<input type="password" name="password"
                               ng-model="model.password"
                               placeholder="Please type your password"
                               ng-show="!showPassword">

<input type="text" name="password"
                               ng-model="model.password"
                               ng-show="showPassword">

<input type="checkbox" ng-model="showPassword">

工作Fiddle

希望对你有帮助。

【讨论】：

ng-attr-type="{{showPassword && 'text' || 'password' }}" 怎么样？ stackoverflow.com/a/16669790/1808494
谢谢，你的实现结果的代码似乎很少
它有效，但我看不到复选框。我添加了一个标签，点击标签后它就可以完成工作，检查密码但是复选框是不可见的，为什么
我猜可能是因为一些 css 问题。你能给我一个不可见复选框的小提琴，这样可以帮助你。您可以更改我在此答案中提供的小提琴并将新的分叉链接发送给我。
哦，是的，csss 中的 webkit-appearance 是造成这种情况的原因，我正在努力，如果我能解决，请告诉你

【解决方案2】：

html

<section ng-app="myApp" ng-controller="mainCtrl">
  <input type="{{inputType}}" placeholder="Put your password" />
  <input type="checkbox" id="checkbox" ng-model="pass_cb" ng-click="togglePassword()" />
  <label for="checkbox" ng-if="pass_cb === true">Hide password</label>
  <label for="checkbox" ng-if="pass_cb === false">Show password</label>  
</section>
<script src="http://code.angularjs.org/1.2.13/angular.min.js"></script>

var myApp = angular.module('myApp', []);
myApp.controller('mainCtrl', ['$scope', function( $scope ){

  $scope.pass_cb = false;
  $scope.inputType = 'password';

  $scope.togglePassword = function(){
    if ($scope.inputType == 'password')
      $scope.inputType = 'text';
    else
      $scope.inputType = 'password';
  };
}]);

查看这个 Fiddle 演示 http://jsfiddle.net/5DMjt/7278/

【讨论】：