angularjs - Angular-Formly : ユーザーのクリック時にフォーム フィールドを動的に追加する

Question

ユーザーが「追加」をクリックして入力フィールドを追加できるように、フォームに機能を追加するにはどうすればよいですか。これは、angular formly ライブラリを使用しています。

これは正確な機能の例ですが、angularjs のみを使用して行われています。

フォーム フィールドを動的に追加する

Answer 1

簡単な例を入れます。

var app = angular.module("app",[]);

app.controller("MyCtrl" , function($scope){
  
   $scope.data ={
       names:[{ name:""}]
   };
  
  $scope.addRow = function(index){
    var name = {name:""};
       if($scope.data.names.length <= index+1){
            $scope.data.names.splice(index+1,0,name);
        }
    };
  
  $scope.deleteRow = function($event,name){
  var index = $scope.data.names.indexOf(name);
    if($event.which == 1)
       $scope.data.names.splice(index,1);
    }
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
   <table>
     <tr ng-repeat="name in data.names track by $index">
        <td> <input type="text" ng-model="data.names[$index].name"></td>
        <td> <input type="button" ng-click="addRow($index)" value="Add" ng-show="$last"></td>
        <td> <input type="button" ng-click="deleteRow($event,name)" value="Delete" ng-show="$index != 0"></td>
     </tr>
   </table> 
    <span>{{data|json}}</span>
</div>