Angularjs:动态更改输入类型

Question

我有一个有时具有true或false有价值的清单.当我ng-repeat用来显示带有值的列表时<input type="text">,<input type="checkbox">如果值匹配布尔值,我想要.

<table class="table table-hover table-striped table-bordered">
    <tbody>
        <tr ng-repeat="parameter in parameter_list">
            <th class="text-left">
                {{parameter.title | uppercase}}
            </th>
            <td class="text-left">
              <div class="form-group">
                <input type="text" ng-model="parameter_list[$index].value" class="form-control">
              </div>
            </td>
        </tr>
    </tbody>
</table>

任何想法,我怎样才能做到这一点？

小提琴

编辑:这不是一个重复的,因为我没有input type一个$scope变量.

Answer 1

保持简单:

<input type="{{typeInput}}" />

在你的控制器中:

$scope.typeInput = 'number';

像魅力一样,没有所有额外的代码

Answer 2

我会推荐更通用的方法。首先，如果您想按类型区分输入，您需要在控制器中声明一些类型检查函数：

$scope.getType = function(x){
    return Object.prototype.toString.call(x);
}

您需要执行此操作，因为在表达式中不可能执行此操作 - 请参阅：如何在 Angular 表达式中获取范围变量的类型？

然后在您的视图中，您可以使用 ng-if 指令根据字段的类型显示不同的控件。这是布尔值的示例表达式：

ng-if="getType(parameter_list[$index].value) == '[object Boolean]'"

您还应该正确定义布尔值，不是“true”/“false”，而是 true/false：

{
        "title": "differed",
        "value": true
}

最后，您的示例的代码如下所示。

看法：

<div ng-controller="MainCtrl" class="container">
        <div>
          <table class="table table-hover table-striped table-bordered">
            <tbody>
                <tr ng-repeat="parameter in parameter_list">
                    <th class="text-left">
                        {{parameter.title | uppercase}}
                    </th>
                    <td class="text-left">
                      <div class="form-group" ng-if="getType(parameter_list[$index].value) != '[object Boolean]'">
                        <input type="text" ng-model="parameter_list[$index].value" class="form-control">
                      </div>
                      <div class="form-group checkbox" ng-if="getType(parameter_list[$index].value) == '[object Boolean]'">
                        <label><input type="checkbox" ng-model="parameter_list[$index].value">{{ parameter_list[$index].title }} </label>
                    </div>
                    </td>
                </tr>
            </tbody>
          </table>
        </div>
</div>

控制器：

var mymodal = angular.module('mymodal', []);

mymodal.controller('MainCtrl', function ($scope) {
  $scope.getType = function(x){
    return Object.prototype.toString.call(x);
  }

    $scope.parameter_list = [
    {
        "title": "name",
        "value": "Product3"
    },
    {
        "title": "version",
        "value": "01.00.00"
    },
    {
        "title": "inventory_name",
        "value": "Product3"
    },
    {
        "title": "inventory_version",
        "value": "01.00.00"
    },
    {
        "title": "differed",
        "value": true
    },
    {
        "title": "differed_name",
        "value": "whatever"
    },
    {
        "title": "accept_error_while_reboot",
        "value": false
    },
    {
        "title": "setup",
        "value": ""
    },
    {
        "title": "ggg",
        "value": "setup.exe"
    },
    {
        "title": "fx",
        "value": "test"
    },
    {
        "title": "gx",
        "value": "setup.exe"
    },
    {
        "title": "tx",
        "value": "setup.exe"
    }
]
  });

在这里你可以找到JSFiddle：http://jsfiddle.net/57qhsqwf/2/