每当我将 Angular 表达式作为input
's的值时type
,它将不起作用:
<input ng-model="model" type="{{'number'}}">
数值被转换为字符串,复选框根本不起作用。
每当我将 Angular 表达式作为input
's的值时type
,它将不起作用:
<input ng-model="model" type="{{'number'}}">
数值被转换为字符串,复选框根本不起作用。
是的,你可以......至少现在:)
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/
2015 年 4 月 17 日更新:
我在上面的 Codepen 中随机更改了 Angular 版本,这似乎从版本 1.0.2 开始工作......希望这有帮助......
您不能动态更改输入的类型,因为 IE 不允许这样做并且 AngularJS 需要跨浏览器兼容。因此,即使您可能在源代码中看到更改的类型,AngularJS 也不会选择它——类型只评估一次并且不能更改。
请注意,同样的限制也适用于 jQuery:jQuery change input type
动态类型的唯一选项是自定义指令(您可以在其中下载动态模板或即时准备 DOM)或ng-include
用于包含输入类型为静态值的包含部分。
您无法在任何浏览器中动态更改输入类型,因此无法使用动态单输入语句。剩下的就是使用条件语句来创建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>
在此示例中,您将指示 Angular 脚本将第二个 div 中的elem.eleType
usingng-switch on
与输入标签中的实际类型(即文本、密码和电子邮件)进行比较(与 using 进行比较ng-switch-when
,并且仅在条件匹配的地方创建该输入元素,其余部分将被忽略。
<input type="text" ng-model="myModel" ng-if="inputType === 'text'"/>
<input type="password" ng-model="myModel" ng-if="inputType === 'password'"/>
这对我有用。
这是@vidriduch 答案的一个小扩展。在这种情况下,我使用表单的模型对象“配置” {type:"password", value:"topsecret"}
,并像这样显示它:
<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
};
这可能不是一个理想的解决方案,但它说明了其他人可能会遇到的“问题”。