動態更改輸入類型

Question

您好，我有一個奇怪的問題。我必須創建一個表單，但每個用戶的字段都不相同，因此他們可能是a或。我試着用角度做這樣的事情

<div ng-controller="myCtrl" ng-repeat="x in prova"> 
    <input type = "{{x}}"> 
</div> 

和控制器這樣

app.controller('controller',['$scope', function($scope){ 
    $scope.prova = [ 
     'text', 
     'check-box'  
    ] 
}); 

但因爲我認爲這是行不通的。

謝謝你的幫助。

Answer 1

您可以使用ng-switch指令在其類型匹配x時僅呈現正確的輸入類型。

<div ng-controller="myCtrl" ng-repeat="x in prova" ng-switch="x"> 
<input type="text" ng-switch-when="text"> 
<input type="checkbox" ng-switch-when="check-box"> 
<textarea ng-switch-when="textarea"></textarea> 
</div> 

更多信息： https://docs.angularjs.org/api/ng/directive/ngSwitch

Answer 2

你錯過了依賴注入的右方括號。這會工作。

app.controller('controller',['$scope', function($scope){ 
     $scope.prova=[ 
     'text', 
     'check-box'  
     ] 
}]); 

Answer 3

plunkr included

這對我的作品。模仿你的代碼，這裏有一個非常簡單的例子plunkr。

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 

    $scope.arrTypes = ['submit', 'text', 'button', 'password', 'month']; 
}); 

，並在index.html的...：

<div ng-repeat = "inpType in arrTypes"> 

    <input type={{inpType}} name="" id="" value={{inpType}} /> 
</div> 

Answer 4

一些代碼的變化：

• 與checkbox取代check-box。
• 用控制器功能代替controller與myCtrl。

工作演示：

控制器：

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

myApp.controller('myCtrl', function($scope) { 
    $scope.prova = [ 
     "text", 
     "checkbox"  
    ] 
}); 

查看：

<div ng-app="myApp" ng-controller="myCtrl"> 
    <div ng-repeat="x in prova"> 
    <input type = "{{x}}"> 
</div> 
</div>