Whenver我有一個角表達式作爲值input
的type
,它不會工作:AngularJS:不能改變輸入類型
<input ng-model="model" type="{{'number'}}">
數字值獲得轉換爲字符串和複選框不會一切工作。
http://jsfiddle.net/punund/NRRj7/3/
Whenver我有一個角表達式作爲值input
的type
,它不會工作:AngularJS:不能改變輸入類型
<input ng-model="model" type="{{'number'}}">
數字值獲得轉換爲字符串和複選框不會一切工作。
http://jsfiddle.net/punund/NRRj7/3/
不能動態地改變輸入的類型,因爲IE不允許這一點,AngularJS必須是跨瀏覽器兼容。因此,即使您可能會看到源代碼中顯示的更改類型,AngularJS也不會提取它 - type只能評估一次,不能更改。
請注意,該限制同樣適用於jQuery的:jQuery change input type
你只對動態類型的選項或者使用ng-include
自定義指令(在這裏你可以下載一個動態模板或即時準備DOM)或以包括輸入類型爲靜態值的部分。
我很想看到一些關於創建自定義指令看到這個的一些技巧...在這裏我的頭撞牆!:) – kentcdodds 2013-08-15 20:07:19
vidriduch提供的答案應該是現在接受的答案。這是可能的更新版本的AngularJS(至少1.2.13,也許更舊?) – Kabb5 2015-04-16 16:37:47
您無法在任何瀏覽器中動態更改輸入類型,因此無法使用動態單個輸入語句。您只需使用條件語句來創建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
比較,只有輸入元素在創造了條件相匹配,其中,其餘的將被忽略
是你可以......至少現在:)
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 ... 希望這個幫助...
<input type="text" ng-model="myModel" ng-if="inputType === 'text'"/>
<input type="password" ng-model="myModel" ng-if="inputType === 'password'"/>
這適用於我。
我喜歡這個,簡單而強大。 – 2016-01-12 19:18:13
不知道在這種情況下「強大」意味着什麼。 – 2017-04-21 16:24:32
這是@ 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
};
這可能不是一個理想的解決方案,但它說明了其他人可能遇到的「疑難雜症」。
<input type="{{showPassword?'text':'password'}}" class="form-control" name="password" placeholder="Enter password" ng-model="register.regData.password">
工作對我來說..
由vidriduch提供的答案應該是公認的答案了。這是可能的更新版本的AngularJS(至少1.2.13,也許更舊?) – Kabb5 2015-04-16 16:39:54