使用AngularJS生成动态表单

时间:2017-07-04 11:59:26

标签: angularjs forms

我正在构建一个AngularJS应用程序,其中表单将通过预定义的模板生成。模板将具有文本输入字段,并且在生成之后,用户可以添加/移除文本字段。 html文件如下:

<body>
<div ng-app="myApp" ng-controller="SdvCtrl">
<div ng-repeat="subdivision in circles">
    <input ng-model="subdivision.location" type="text" />
    <input ng-model="subdivision.firstName" type="text" />
    <input ng-model="subdivision.lastName" type="text" />
    <button class="remove" ng-show="$last" ng-click="removeSubdivision()">-
    </button>
</div> 
<a href="#" ng-click="addSubdivision()">Add</a>


 <pre>
    {{ circles| json }}
 </pre>

</div>
</body>

js文件如下:

var myApp = angular.module('myApp', []);
myApp.controller('SdvCtrl', function ($scope) {
  $scope.circles = [{
      location: null,
      firstName: null,
      lastName: null
  }];

  $scope.addSubdivision = function () {
      $scope.circles.push({
          location: null,
          firstName: null,
          lastName: null
      });
  };

  $scope.removeSubdivision = function () {
      $scope.circles.splice(-1,1);
   };
 });

我的问题不是硬编码html文件中的表单字段名称,而是希望将它们作为模板保存在文本文件中,[formName: circle, fields: {'location','firstName','lastName'}], [formName: devblock, fields: {'nameOfblock','noOfBlock','villageName'}].这些表单名称将出现在一个下拉框中,选择表格名称时,将生成相应的表格。任何指导都会非常有用。

0 个答案:

没有答案