Question

每当我将一个Angular表达式作为input的{{1}}的值时，它就不起作用：

type

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

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

Answer 1

是的，你可以......至少现在：）

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版... 希望这有帮助...

Answer 2

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

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

您只有动态类型的选项可以是自定义指令（您可以在其中下载动态模板或在运行中准备DOM）或使用ng-include包含包含输入类型为静态值的部分

Answer 3

您无法在任何浏览器中动态更改输入类型，因此无法使用动态单输入语句。您将使用条件语句来创建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>

在此示例中，您指示角度脚本将elem.eleType使用第二个div中的ng-switch on与实际类型（即输入标记中的文本，密码和电子邮件）进行比较（使用ng-switch-when进行比较，并且只有在条件匹配的情况下创建输入元素，才会忽略休息。

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

为我工作..

AngularJS：无法更改输入类型

6 个答案: