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> 

任何想法，我怎么能做到这一点？

Fiddle

编辑：这不是一个重复的，因为我没有inputtype在$scope变量做。

Answer 1

我会推荐更通用的方法。如果你想按类型区分您输入首先你需要声明某种类型的检查功能在你的控制器：

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

你必须这样做，因为这是不可能做到这一点的表达 - 见：How to get a type of scope variable in Angular expression?

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

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

你也应该正确地定义你的布尔值，而不是“真” /“假”，但真/假：

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

Answer 2

您只需定义ngShow和ngHide。

FIDDLE

EDIT FIDDLE

如果你想用表演;

<div class="form-group"> 
    <input type="checkbox" ng-show="parameter_list[$index].value==false || parameter_list[$index].value==true " ng-model="parameter_list[$index].value" class="form-control"> 
    <input type="text" ng-show="parameter_list[$index].value!=false && parameter_list[$index].value!=true " ng-model="parameter_list[$index].value" class="form-control"> 
</div> 

或者您可以发送isChecked值的对象。

<div class="form-group"> 
    <input type="checkbox" ng-show="parameter_list[$index].isChecked" ng-model="parameter_list[$index].value" class="form-control"> 
    <input type="text" ng-show="!parameter_list[$index].isChecked" ng-model="parameter_list[$index].value" class="form-control"> 
</div> 

Answer 3

您可以使用ng-switch根据属性的值为true或false来实现您的目标！

<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-switch="parameter_list[$index].value"> 
      <input type="text" ng-model="parameter_list[$index].value" class="form-control" ng-switch-when="true"> 

干杯！ :)

Answer 4

只要保持它的简单：

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

而在你的控制器：

$scope.typeInput = 'number'; 

得好好的，没有所有这些额外的代码

Answer 5

我更新您的jsfiddle：http://jsfiddle.net/tornado1979/jp5rcm8j/2/

我用ng-show指令来检查，如果值是tru或false并创建可以被检查或不被检查的动态复选框。

<input ng-show="parameter_list[$index].value !=true && parameter_list[$index].value !=false" type="text" ng-model="parameter_list[$index].value" class="form-control"> 

<input ng-show="parameter_list[$index].value==true || parameter_list[$index].value==false" type="checkbox" ng-model="parameter_list[$index].value" class="form-control"> 

虽与“setup”属性，你离开它空这样的角度把它读成false，并创建一个复选框有一个问题。你可以添加一个不同于null的值吗？这将完全解决问题。

2.我改变你的“真”和“假”值真正和假没有“符号，为的角度理解是布尔而不是字符串值。

希望有所帮助，祝你好运。