Angular form.io removeRow

时间:2016-05-30 18:12:04

标签: angularjs api

我正在使用Angular和form.io API,并且有一个添加行按钮,可以直接单击插入一个空行,或者可以单击一些预先选择的值,这将触发此添加行单击事件,然后填充输入。这一切都运行良好,我似乎无法解决的问题是删除行按钮在手动单击按钮的情况下按预期工作,但如果通过预先选择的值按钮触发删除行按钮将删除最后一行而不是所选行。有一些活动的部分,所以请问是否有其他代码是有用的:

// Form.IO相关代码:

app.controller('formioDataGrid', [
'$scope',
function($scope) {
  // Ensure each data grid has a valid data model.
  $scope.data = $scope.data || {};
  $scope.data[$scope.component.key] = $scope.data[$scope.component.key] || [{}];

  // Pull out the rows and cols for easy iteration.
  $scope.rows = $scope.data[$scope.component.key];
  $scope.cols = $scope.component.components;

  // Add a row the to grid.
  $scope.addRow = function() {
    if (!Array.isArray($scope.rows)) {
      $scope.rows = [];
    }
    $scope.rows.push({});
  };

  // Remove a row from the grid.
  $scope.removeRow = function(index) {
    $scope.rows.splice(index, 1);
  };
}
]);

我的预选值按钮单击代码,单击时,触发添加行按钮,然后填充行:

var element1 = angular.element('a[ng-click="addRow()"]');
element1.click();
$('.myTable ng-form input:last').prop('value', $(this).text());

每个删除按钮上的代码

<tr class="formio-data-grid-row ng-scope" ng-repeat="rowData in data[component.key] track by $index">
<td class="ng-scope" ng-init="component.hideLabel = true" ng-repeat="component in component.components track by $index">
<td>
<a class="btn btn-default" ng-click="removeRow($index)">
<span class="glyphicon glyphicon-remove-circle"></span>
</a>
</td>
</tr>

我已经尝试了十几种模拟&#34;模拟&#34;点击按钮,但我想我在这里遗漏了一些东西。任何想法如何调用addRow,填充值并保持正确的删除行功能?

1 个答案:

答案 0 :(得分:1)

我解决了这个问题,据我所知,这些调用我用来设置值:

 UPDATE project SET name = 'New Name', platform = 'iOS' WHERE id = 2;

需要附带以下内容以确保角度正确更新范围:

 UPDATE project SET name = 'New Name' WHERE id = 2 AND platform = 'IOS'; 

添加此行后,删除按钮始终如一。