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

从数组中删除会产生副作用

1 个答案: