动态输入类型angularjs

如何根据值动态更改输入类型

这是plunker链接

---

如果需要，请使用不同的模板

---

Plunker:

更改指令以查看属性表达式：

scope.$watch("inputType", function (newValue, oldValue, scope) {
    if (newValue && newValue !== oldValue) {
        element.attr("type", newValue);
    }
});

然后，只要表达式的值发生更改，该指令就会更新

---

注意：通过让观察者直接计算属性，该指令避免了使用隔离作用域来计算属性。

实际上它在plunker中工作，但在我的实际代码中，由于某种原因它不工作。我用的是同样的角度版本你的弹夹对我不起作用。我用手表更新了我的答案，而不是使用ng。如果我不能输入字母表，我尝试在指令中添加你的代码片段。我的要求是wn我选中isBulk=true和quantity=NOT application，wn我取消选中isBulk=false和quantity=0。这是像往常一样，但我应该不能键入字母，如果它没有检查。你能用你的工作答案更新plunker链接吗。谢谢如果它允许我输入字母，那么输入类型仍然是文本，因此它实际上没有将输入类型设置为数字wn v切换复选框我添加了我的宝物我仍然可以输入字母wn它未选中，仍然无法按预期工作。要求：选中复选框时：类型=文本输入值=未选中复选框时不适用：类型=数字输入值=0，输入应仅允许数字

<input ng-if="isBulk" input-type="text" name="lastName" ng-model="quantity"
       ng-minlength="3" ng-maxlength="10">
<input ng-if="!isBulk" input-type="number" name="lastName" ng-model="quantity"
       ng-minlength="3" ng-maxlength="10">

scope.$watch("inputType", function (newValue, oldValue, scope) {
    if (newValue && newValue !== oldValue) {
        element.attr("type", newValue);
    }
});

app.directive('inputType', function() {
    return {
      restrict: "A",
      link: function(scope, elem, attrs) {
      ̶s̶c̶o̶p̶e̶:̶ ̶{̶
          ̶i̶n̶p̶u̶t̶T̶y̶p̶e̶:̶ ̶=̶
      ̶}̶,̶ 
      link: function(scope, elem, attrs) {          
        ̶v̶a̶r̶ ̶i̶n̶p̶u̶t̶T̶y̶p̶e̶ ̶=̶ ̶s̶c̶o̶p̶e̶.̶$̶e̶v̶a̶l̶(̶a̶t̶t̶r̶.̶i̶n̶p̶u̶t̶T̶y̶p̶e̶)̶;̶
        scope.$watch(attrs.inputType, function(newValue) {
            var inputType = newValue;
            console.log("inputType", inputType);
            elem.attr("type", inputType);
        });
      }
    };
});