javascript - 从数组中删除有副作用

Question

我正在制作一个表单来创建订单。输入字段是动态的，可以使用按钮添加。

现在每行后面都有一个删除按钮，应该删除该行。

为此，我创建了 delRow() 函数。它之所以有效，是因为该行被删除，不幸的是，它下面的行的值也被删除，但输入字段保留在原处。我似乎无法弄清楚为什么。

模板:

<form>
      <div class="form">
        <table>
            <tr ng-repeat="row in rows">
              <td>
                <input class="product" ng-model="row.product[$index]" placeholder="{{productPlaceholder}}" type="text">
              </td>
              <td>
                <input ng-model="row.amount[$index]" type="number" min="0">
              </td>
              <td>
                <button class="btn btn-primary btn-functionality btn-danger btn-del" ng-click="delRow($index)">x</input>
              </td>
            </tr>
        </table>

        <button class="btn btn-primary btn-success btn-add" ng-click="addRow()">+</button>
      </div>
      <div class="main-buttons">
        <button class="btn btn-primary btn-lg btn-create" ng-click="createOrder()">Create</button>
        <button class="btn btn-primary btn-lg" ng-click="cancelOrder()">Cancel</button>
      </div>
    </form>

Controller :

'use strict';

angular.module('myApp.orderNew', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/order/new', {
    templateUrl: 'order-new/order-new.template.html',
    controller: 'OrderNewCtrl'
  });
}])

.controller('OrderNewCtrl', function($scope, $location, $http, $log) {

  $scope.$log = $log;
  $scope.message ="test";

  $scope.rows = [{}];
  $scope.counter = 1;
  $scope.productPlaceholder = 'Product';


  $scope.addRow = function() {
    $scope.rows.push({});
    $scope.counter++;
  }

  $scope.delRow = function(index) {
    if ($scope.rows.length < 2) { return; }

    $scope.rows.splice(index, 1);
  }

  $scope.cancelOrder = function() {
    $location.path('/orders');
  }

  $scope.createOrder = function() {
    var data = $scope.fields;
    alert(data);
    //$post('/path_to_server', obj);
  }

  $http.get('orders.json').then(function(data) {
    $scope.orders = data;
  });

});

Answer 1

而不是:

<input ng-model="row.product[$index]" type="number" min="0">

你应该这样做:

<input ng-model="row.product" type="number" min="0">

因为您正在删除行，所以索引引用被丢弃。您可以将值直接放置到对象的属性中，而不是使用索引引用。

我在这里制作了一支工作笔:

http://codepen.io/nilestanner/pen/gmyBRo?editors=1011