Angular-Formly：在用户单击时动态添加表单字段

Question

我将如何在表单中添加功能，以便用户可以通过单击 "Add" 添加更多输入字段。这使用 angular 形式库。

这是一个确切功能的示例，但仅使用 angularjs 完成。

Answer 1

看到这个Plunker

这是您需要的示例。正如您在 plunker 中看到的那样，有一个 TextArea 可以在单击按钮时动态创建。也可以通过单击 remove 按钮删除创建的 TextAreas。

见下文HTML

<div class="col-sm-10">
  <input type="button" class="btn btn-info" ng-click="addNewChoice()" value="ADD QUESTION">
  <div class="col-sm-4">
    <fieldset data-ng-repeat="field in choiceSet.choices track by $index">
      <textarea rows="4" cols="50" ng-model=" choiceSet.choices[$index]"></textarea>
      <button type="button" class="btn btn-default btn-sm" ng-click="removeChoice($index)">
        <span class="glyphicon glyphicon-minus"></span> REMOVE
      </button>
    </fieldset>
  </div>
</div>

和JS如下

var app = angular.module('myApp', []);
app.controller('inspectionController', function($scope, $http) {
  $scope.choiceSet = {
    choices: []
  };
  $scope.quest = {};
  $scope.choiceSet.choices = [];
  $scope.addNewChoice = function() {
    $scope.choiceSet.choices.push('');
  };
  $scope.removeChoice = function(z) {
    $scope.choiceSet.choices.splice(z, 1);
  };
});

Answer 2

我举个简单的例子。

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>

Answer 3

简单的例子也可以按任何顺序删除：

http://plnkr.co/edit/c0FbjBJkHtDYRKslz0iq?p=preview

或：

一些html:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="oneApp" ng-controller="ctrl">
    <button ng-click="addNewRow()">Add row</button>

    <table>
        <tr ng-repeat="row in tablerows track by $id(row)">
        <td ng-model="tablerows[$index]">
                <input>
            </td>
            <td>
                <button ng-click="removeRow($index)" type="button">
                  Delete
                </button>
            <td>
        </tr>
    </table>
  </body>
</html>

script.js:

var app = angular.module('oneApp', []);
app.controller('ctrl', function($scope){
    $scope.tablerows = [];

    $scope.addNewRow = function () {
        var row_id;
        var tablerows = $scope.tablerows;
        if(tablerows.length > 0){
            row_id = tablerows[tablerows.length-1];
            row_id = row_id +1;
        }else{
            row_id = 0;
        }
        $scope.tablerows.push(row_id);
    };

    $scope.removeRow = function (index) {
        $scope.tablerows.splice(index,1);
    };
    }
);

Angular-Formly：在用户单击时动态添加表单字段

Angular-Formly : Adding Form fields dynamically on user click

angularjs

angular-formly

看到这个Plunker