Question

我在以角度方式动态捕获表单输入时遇到问题。我有一个表单，需要几个输入资源。每个资源都有许多部分，每个部分都有许多链接。我已经能够为用户提供动态添加/删除部分和链接的功能，但是当使用ng-model实际捕获它时，我似乎无法获得它。

根据this stackoverflow帖子，我认为我可以做第一个答案ng-model="newResourceForm.sections[section.title]"之类的事情，但这似乎对我不起作用（它说它未定义）< / p>

以下是我为此制作的plunkr的链接：

Answer 1

您的代码中的问题似乎是您将变量绑定到

newResourceForm.sections

但是您在名为sections的数组中创建了没有title属性的新部分。

使用ng-model="newResourceForm.sections[section.title]"有效但section.title未定义。结果是，newResourceForm.sections对象只包含一个名为undefined的部分，无论您的sections数组中有多少个对象。

Answer 2

您添加/编辑部分的方式有点偏差。没有看你的控制器代码就很难说，但我认为这是问题的一部分：

<div ng-repeat="section in sections" class="form-group mt">

它看起来应该更像

<div ng-repeat="section in resource.sections" class="form-group mt">

我制作了一个非常简单的工作版本，我认为你想要的，随意尝试一下！（你只需要改变angular.min.js的位置）

<html>
  <head>
    <script src="static/angular.min.js"></script>
    <script>
      angular.module('app', [])
      .controller('resourseCtrl', resourseCtrl);

      function resourseCtrl() {
        this.resource = {'sections': []};
        console.log('controller started');
        this.addSection = function() {
          this.resource.sections.push({});
        };
        this.removeSection = function() {
          this.resource.sections.splice(this.resource.sections.length - 1, 1);
        };
      }
    </script>
  </head>
  <body ng-app="app">
    <div ng-controller="resourseCtrl as resourseCtrl">
      <button ng-click="resourseCtrl.addSection()">add section</button>
      <button ng-click="resourseCtrl.removeSection()">remove section</button>
      <div ng-repeat="section in resourseCtrl.resource.sections">
        <p>name:<input text ng-model="section.name"></input></p>
        <p>title:<input text ng-model="section.title"></input></p>
        <p>description:<input text ng-model="section.description"></input></p>
      </div>
      {{ resourseCtrl.resource }}
    </div>
  </body>
</html>

具有动态表单输入的ng-model

2 个答案: