動態更改類型輸入

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

這個對我有用。 這是一個在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>