Question

您好我已经查看了之前的答案并且知道解决方案在于ng-repeat但是我认为我的点击功能和/或数据结构存在问题。我有一个名为controller.addCPR的控制器对象，它有一堆来自数据库查询的属性。

我要做的是使用点击功能在表单中复制一行，其中包含3个属性。使用ng重复行只是重复了一次，但添加按钮仍然没有做任何事情。这里有任何帮助，这是我的尝试。

控制器对象设置默认

(function() {
'use strict';

angular
    .module('globalAdmin.states_3')
    .controller('AddCPRModalController', AddCPRModalController);

     AddCPRModalController.$inject = ['$uibModalInstance', 'StatesService'];

     function AddCPRModalController($uibModalInstance, StatesService) { 

     controller.addCPR = {
        alert: 'No',
        weight: 10,
        status: 'y',
        dte: new Date()
     };

     controller.onAddRowClick = function () {
        var row = {
            url: controller.addCPR.url,
            type: controller.addCPR.type,
            dynamic: controller.addCPR.dynamic
        };
        controller.addCPR.push(row)
        console.log('clicked');
     };

     //other controller functions not listed here

   }
})();

我试图在表单中点击时复制的行的HTML

<div ng-repeat="row in controller.addCPR" class="form-group row add-row" ng-class="{'has-danger': addCPRForm.url.$dirty && addCPRForm.url.$invalid}">
  <label class="col-sm-2 control-label" for="inputDate">URL(s):</label>
  <div class="col-sm-4">
    <input type="text" class="states-url" ng-model="controller.addCPR.url" placeholder="Enter URL's here">
  </div>
  <div class="col-sm-2">
    <label>Type:
      <div class="type-dropdown">
          <select ng-model="controller.addCPR.type">
              <option value="html">HTML</option>
              <option value="pdf">PDF</option>
              <option value="csv">CSV</option>
              <option value="xls">XLS</option>
              <option value="txt">TXT</option>
              <option value="dbf">DBF</option>
              <option value="doc">DOC</option>
              <option value="sas">SAS</option>
              <option value="ppt">PPT</option>
              <option value="png">PNG</option>
              <option value="jpg">JPG</option>
          </select>
      </div>
  </label>
  </div>
  <div class="col-sm-3">
    <label>Dynamic:
      <div class="dynamic-dropdown">
          <select ng-model="controller.addCPR.dynamic">
              <option value="n">No</option>
              <option value="y">Yes</option>
          </select>
      </div>
  </label>
  </div>
  <button class="addRow" ng-click="controller.onAddRowClick()">+</button><button class="removeRow"
    ng-click="onRemoveRowClick()">-</button>
</div>

修改-------------------------------------- < / p>

我想出了自己的问题，我希望答案可以帮助别人。

首先我将行上的ng-repeat修改为row in controller.rows track by $index

其次在我的控制器中，我创建了一个新数组，其属性与ng-repeat

相匹配

controller.rows = [
   {url: '', type: '', dynamic: ''},
];

最后我将点击功能修改为

controller.onAddRowClick = function() {
        var row = {
            url : '',
            type : '',
            dynamic : ''
        };
        controller.rows.push(row);
        console.log('clicked');
    };

现在正在按预期添加行。感谢大家的投入。

如何使用Angular和onClick函数将行添加到表单

0 个答案: