從陣列中刪除有副作用

我正在創建一個表單來創建訂單。輸入字段是動態的，可以添加一個按鈕。從陣列中刪除有副作用

現在每行之後都有一個刪除按鈕，應該刪除該行。

爲此，我製作了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; 
    }); 

});

來源

2017-04-05 Soundwave

我認爲你正在使用的拼接功能，錯了，應該是$ scope.rows.splice（0，指數） –

都能跟得上，消除一切 – Soundwave

嗯嘗試發佈一個jsFiddle與它的代碼，以便我可以測試它 –

相反的：

<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

來源

2017-04-05 15:47:48

從陣列中刪除有副作用

回答

相關問題