AngularJS：不能改变输入类型

Question

Whenver我有一个角表达式作为值input的type，它不会工作：

<input ng-model="model" type="{{'number'}}"> 

数字值获得转换为字符串和复选框不会一切工作。

http://jsfiddle.net/punund/NRRj7/3/

Answer 1

不能动态地改变输入的类型，因为IE不允许这一点，AngularJS必须是跨浏览器兼容。因此，即使您可能会看到源代码中显示的更改类型，AngularJS也不会提取它 - type只能评估一次，不能更改。

请注意，该限制同样适用于jQuery的：jQuery change input type

你只对动态类型的选项或者使用ng-include自定义指令（在这里你可以下载一个动态模板或即时准备DOM）或以包括输入类型为静态值的部分。

Answer 2

您无法在任何浏览器中动态更改输入类型，因此无法使用动态单个输入语句。您只需使用条件语句来创建type是硬编码的元素。

使用ng-switch on指令您可以比较type并根据条件匹配创建元素。例如：

<div class="form-group" ng-repeat="elem in formElements"> 
<div class="col-lg-12" ng-switch on="elem.eleType"> 
    <input ng-switch-when="text" type="text" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}" placeholder="{{elem.placeholder}}" popover-trigger="focus" popover="{{elem.popoverText}}"> 
    <input ng-switch-when="password" type="password" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}" placeholder="{{elem.placeholder}}" popover-trigger="focus" popover="{{elem.popoverText}}"> 
    <input ng-switch-when="email" type="email" id="{{elem.id}}" name="{{elem.id}}" class="{{elem.class}}" placeholder="{{elem.placeholder}}" popover-trigger="focus" popover="{{elem.popoverText}}"> 
</div> 
</div> 

在这个例子中，你正在指导角脚本根据实际类型，即，文本，密码和电子邮件输入标签第二个div使用ng-switch on比较elem.eleType（使用ng-switch-when比较，只有输入元素在创造了条件相匹配，其中，其余的将被忽略

Answer 3

是你可以......至少现在:)

HTML：

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

JS：

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

    // Set the default value of inputType 
    $scope.inputType = 'password'; 

    // Hide & show password function 
    $scope.hideShowPassword = function(){ 
    if ($scope.inputType == 'password') 
     $scope.inputType = 'text'; 
    else 
     $scope.inputType = 'password'; 
    }; 
}]); 

源：http://codepen.io/gymbry/pen/fJchw/

UPDATE 17/04/2015：

我已随机上文Codepen改变角版本，这似乎从1.0版本。 2 ... 希望这个帮助...

Answer 4

<input type="text" ng-model="myModel" ng-if="inputType === 'text'"/> 
<input type="password" ng-model="myModel" ng-if="inputType === 'password'"/> 

这适用于我。

Answer 5

这是@ vidriduch的答案的一个小小的扩展。在这种情况下，我使用的形式{type:"password", value:"topsecret"}的模型对象“config”以及像这样显示它：

<input type="{{config.type}}" ng-model="config.value"> 

在理想情况下，我可以根据需要改变配置对象，并使用相同的输入元件编辑任何配置记录匹配的类型/值。我原来的切换方式记录是调用下面范围功能：

$scope.newRecord = function (newcfg) { 
    $scope.config = newcfg; 
}; 

不过，我有时会遇到转换错误或有关验证投诉。这是在Chrome 47中。例如，它真的不喜欢从文本切换到日期。浏览器似乎在改变类型或vv之前就改变了价值。

我通过强制模型（以及类型）在更改之间重置来解决此问题。

$scope.newRecord = function (newcfg) { 
    $scope.config = {}; //clear the model object 
    $timeout(function() { 
     $scope.config = newcfg; 
    }, 0); //zero delay needed 

};

这可能不是一个理想的解决方案，但它说明了其他人可能遇到的“疑难杂症”。

Answer 6

<input type="{{showPassword?'text':'password'}}" class="form-control" name="password" placeholder="Enter password" ng-model="register.regData.password"> 

工作对我来说..