Question

我坚持这个小任务。我需要通过点击“添加”来动态生成表单输入字段。表单上的按钮。该表单应该创建DB表模式。因此，每个输入字段都是数据库表字段名称。

我可以动态生成字段，但在收集实际数据时遇到问题。

<form ng-controller="NewTableCtrl" ng-submit="submitTable()">
  <input type='text' ng-model='table.title' placeholder='Title:'>
  <input ng-repeat="field in fields" type='text' ng-model='table.fields' placeholder='Field:'>
  <div>
    <button type='submit'>Submit</button>
    <button ng-click="addFormField()">Add</button>
  </div>
</form>

..和控制器

.controller('NewTableCtrl', function($scope) {
  $scope.fields = [];
  $scope.table = {};

  $scope.addFormField = function () {
    $scope.fields.push({});
  }

  $scope.submitTable = function () {
    console.log($scope.table);
  }
});

看起来很简单。当我点击添加＆＃39;按钮它会生成新的输入字段，但它使用相同的模型对象（obveously）。这就是我的误解所在。我想如果我在控制器中声明$scope.fields = [];，那么重复字段数据就会进入数组。但它只是在每个重复输入字段中回显输入。我现在明白，这就是双向绑定的方式。

我认为这样的原因是通过普通表单提交的类比，其中重复输入字段名称成为URL编码表单数据中的数组。

那么我该如何解决这个问题呢？服务器需要得到如下字段数组：fields: [field1, field2 ...]我是否需要为每个字段生成具有不同范围变量的输入字段？我该怎么做？

这是否比我想的更复杂，它需要是一个指令？如果是，请告诉我如何做到这一点。

感谢。

Answer 1

现在你正在迭代$scope.fields。当你添加一个新字段时，你将一个空对象推入$scope.fields，但每个输入的ng模型都指向$scope.table.fields（在第一个输入写入它之前它不存在 - 然后它将保持一个字符串变量）。

对于这个简单的用例，您可以尝试：

app.controller('NewTableCtrl', function($scope) {

  $scope.table = { fields: [] };

  $scope.addFormField = function() {
    $scope.table.fields.push('');
  }

  $scope.submitTable = function() {
    console.log($scope.table);
  }

});

和

<input ng-repeat="field in table.fields track by $index" type='text' ng-model='table.fields[$index]' placeholder='Field:'>

演示：http://plnkr.co/edit/6iZSIBa9S1G95pIMBRBu?p=preview

Answer 2

看看这个

<强> Working Demo

<强> HTML

<body>
<div ng-app=''>
    <div ng-controller="questionCtrl">
        <div>
            <ul>
                <li ng-repeat="elemnt in questionelemnt">

                    <div>
                        <div id={{elemnt.id}} style="display:inline" >
                            <span  ng-model="elemnt.question" ng-hide="editorEnabled" ng-click="editorEnabled=true">
                                {{elemnt.question}}
                            </span>
                            <div  ng-show="editorEnabled">
                                <input  ng-model="elemnt.question" ng-show="editorEnabled" >
                                <button href="#" ng-click="editorEnabled=false">Done editing</button>
                            </div>
                        </div>
                        <div style="display:inline">
                            <span>
                                <input type="text" ng-model="elemnt.answer" placeholder="Answer" required/>
                            </span>
                        </div>

                        <span ng-hide="elemnt.length == 1">

                             <button ng-click="questionelemnt.splice($index, 1)">Remove</button>

                        </span>
                    </div>
                    <hr/>
                </li>
                <li>
                     <button ng-click="addFormField($event)">Add</button>
                </li>
            </ul>
        </div>
        <div>
            <button ng-click="showitems($event)">Submit</button>
        </div>
        <div id="displayitems" style="visibility:hidden;">
            {{questionelemnt}}
        </div>
    </div>
</div>
</body>

<强>脚本

function questionCtrl($scope) {
    var counter = 0;
    $scope.questionelemnt = [{
        id: counter,
        question: 'Question-Click on me to edit!',
        answer: ''
    }];

    $scope.addFormField = function ($event) {
        counter++;
        $scope.questionelemnt.push({
            id: counter,
            question: 'Question-Click on me to edit!',
            answer: ''
        });
        $event.preventDefault();
    }

    $scope.showitems = function ($event) {
        $('#displayitems').css('visibility', 'none');
    }
}

Answer 3

使用散列图而不是数组来改变tasseKATT解决方案。这允许我有一个很好的JSON对象，我可以直接使用它来构建我的查询过滤器。

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

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <style>
      div{ margin: 1em;}
      input{margin-left:1em;}
    </style>
  </head>

  <body ng-controller="myCtrl">

    <h2>Using a filter map tied to ng-model to create a filter object</h2>

    <div ng-repeat="field in fields">
      {{field}}<input ng-model=filters[field] />
    </div>

    <hr>
    <h3>Filter</h3>
    {{filters}}

    <script>

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

      app.controller("myCtrl",function($scope){
        $scope.filters={};
        $scope.fields=["name","address","phone","state"];
      });

      angular.bootstrap(document,["app"]);

    </script>

  </body>

</html>

生成动态表单输入字段并收集数组中的字段数据

3 个答案: