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.我改變你的「真」和「假」值真正和假沒有「符號，爲的角度理解是布爾而不是字符串值。

希望有所幫助，祝你好運。