18

每当我将 Angular 表达式作为input's的值时type，它将不起作用：

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

数值被转换为字符串，复选框根本不起作用。

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

4

5 回答 5

30

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

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 开始工作......希望这有帮助......

于 2015-03-12T12:04:57.827 回答
21

您不能动态更改输入的类型，因为 IE 不允许这样做并且 AngularJS 需要跨浏览器兼容。因此，即使您可能在源代码中看到更改的类型，AngularJS 也不会选择它——类型只评估一次并且不能更改。

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

动态类型的唯一选项是自定义指令（您可以在其中下载动态模板或即时准备 DOM）或ng-include用于包含输入类型为静态值的包含部分。

于 2013-03-01T10:25:15.230 回答
13

您无法在任何浏览器中动态更改输入类型，因此无法使用动态单输入语句。剩下的就是使用条件语句来创建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.eleTypeusingng-switch on与输入标签中的实际类型（即文本、密码和电子邮件）进行比较（与 using 进行比较ng-switch-when，并且仅在条件匹配的地方创建该输入元素，其余部分将被忽略。

于 2013-12-22T15:29:40.997 回答
3 
<input type="text" ng-model="myModel" ng-if="inputType === 'text'"/>
<input type="password" ng-model="myModel" ng-if="inputType === 'password'"/>

这对我有用。

于 2015-05-08T08:01:45.950 回答
1

这是@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

};

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

于 2016-01-10T22:22:33.040 回答