从阵列中删除有副作用

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>

控制器：

'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