使用angular将type password样式更改为none



我有一个疑问,我想把我的应用程序中的复选框,以显示或隐藏密码的输入文本

<input type="text" ng-model="data.username" placeholder="username" value="username" class="form-control" popover="inserisci qui il tuo username" popover-trigger="focus" popover-placement="right"/><br>
<input id="pwd" type="password" ng-model="data.password" placeholder="password" value="password" class="form-control" popover="inserisci qua la tua password" popover-trigger="focus" popover-placement="right"/><br>
<input class="btn-primary btn-lg" type="submit" value="Login">
<button class="btn-warning btn-lg" type="button" ng-click="cancel()">CANCELLA</button>
<input ng-model="show" type="checkbox"><span>Show Password</span>

我需要在show上绑定一个函数,它更改密码字段的样式或类型。搜索周围我发现一些话题,人们讨论的事实是,它是不可能改变类型,所以我想象的唯一方法是改变字段的风格,有没有办法改变密码的风格为"无"风格?
编辑
即使我使用了Alex提出的解决方案,并且我不得不说它是有效的,我也尝试过以这种方式在类型上使用绑定

<input id="pwd" type="{{passwordtype}}" ng-model="data.password" placeholder="password" value="password" class="form-control" popover="inserisci qua la tua password" popover-trigger="focus" popover-placement="right"/><br>
<input ng-model='check' ng-change="show()" type="checkbox"><span>SHOW PASSWORD</span>

JS

$scope.check=false
$scope.show=function(){
    if($scope.check==false){
        $scope.check=true;
        $scope.passwordtype='text'
    }else{
        $scope.check=false;
        $scope.passwordtype='password'
    }
}

它在浏览器和firefox上工作,奇怪的是在chrome和opera上,当我期望有文本时,该字段将磁盘更改为正方形,知道为什么吗?

您可以使用一个简单的魔术显示和隐藏。

例子:

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

实例:http://jsfiddle.net/choroshin/694f7/1/

你不能动态地做到这一点,因为IE不允许这样做,而且它不符合跨浏览器兼容性的目的。如果你真的想这么做。使用angularjs的显示/隐藏功能来完成它。如果checkboxchecked则显示一个,否则显示另一个

相关内容

最新更新