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"> 

工作對我來說..