动态更改输入类型

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>