Question

你好我有一个奇怪的问题。我必须创建一个表单，但每个用户的字段都不同，所以它们可以是或者。我试着用角度来做那样的事情

<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

部分代码更改：

将check-box替换为checkbox。
在控制器功能中将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>

动态更改类型输入

4 个答案: