AngularJS

Question

在 angularjs 中尝试 remove/delete 嵌套对象时，我总是感到困惑。我希望有人可以帮助我完成我正在处理的示例项目，并确定我做错了什么。

我有一个 UI，其中 table 中有几行嵌套数据。用户将在任何行中单击 "Delete" 以开始删除该给定行。然后（这就是我挣扎的地方）他们将单击 "Remove Deleted Items" 以删除所有 "deleted" 属性设置为 true 的嵌套对象。

我已经创建了一个示例来展示我正在努力完成的事情....

http://plnkr.co/edit/FrKIuEobEBNQ4Kl7TPaC?p=preview

这是我的 AngularJS 代码：

var myApp = angular.module("fruit", ['ngRoute', 'ngSanitize', 'ui.router']);

myApp.controller("FruitCtrl", function($scope) {

$scope.foods = [{
'id': 1, 'fruits': [{
  'id': '1',
  'name': 'Apple',
  'color': 'Red',
  'shape': 'Weird',
  'size': 'medium', 
  'deleted': false
}, {
  'id': '2',
  'name': 'Orange',
  'color': 'Orange',
  'shape': 'Sphere',
  'size': 'medium', 
  'deleted': false
}, {
  'id': '3',
  'name': 'Lime',
  'color': 'Green',
  'shape': 'Sphere',
  'size': 'small', 
  'deleted': false
}, {
  'id': '4',
  'name': 'Lemon',
  'color': 'Yellow',
  'shape': 'Sphere',
  'size': 'medium', 
  'deleted': false
}, {
  'id': '5',
  'name': 'Banana',
  'color': 'Yellow',
  'shape': 'Oblong',
  'size': 'large', 
  'deleted': false
    }]
  }];

  $scope.removeDeletedFruit = function(itemId, index) {
for (var i = 0; i < $scope.foods.length; i++) {
  if ($scope.foods[i].id === itemId) {
    $scope.foods[i].deleted.splice(index, 1);
    break;
  }
}
}

});

这是我的 HTML:

<div class="container">
  <h2>Total Fruits: {{foods[0].fruits.length}}</h2>
  <button class="btn btn-danger" ng-click="removeDeletedFruit(fruit.id, $index)">Remove Deleted Items</button>
    <table class="table" ng-repeat="food in foods">
      <thead>
        <tr>
          <th>Fruit</th>
          <th>Shape</th>
          <th>Color</th>
          <th>Size</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="fruit in food.fruits" ng-class="{'delete-item': fruit.deleted, '': !fruit.deleted}">
          <td>  
            <span>{{fruit.name}}</span>
          </td>
          <td>  
            <span>{{fruit.shape}}</span>
          </td>
          <td>
            <span>{{fruit.color}}</span>
          </td>
          <td>
            <span>{{fruit.size}}</span>
          </td>
          <td>
            <button type="button" class="btn btn-danger" ng-click="fruit.deleted = !fruit.deleted" ng-disabled="fruit.deleted">
                <span>Delete</span>
            </button>
            <button type="button" class="btn btn-neutral" ng-click="fruit.deleted = !fruit.deleted" ng-if="fruit.deleted" ng-disabled="!fruit.deleted">
                <i class="fa fa-history fa-1-5x"></i>
                <span>Undo</span>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
</div>

有人可以协助指导我朝着正确的方向前进吗？或者完成这项工作的最佳方法是什么？

Answer 1

我更改了你的函数以使用 Array.prototype.filter()

$scope.removeDeletedFruit = function(itemId, index) {
   angular.forEach($scope.foods, function(fruit){
     fruit.fruits = fruit.fruits.filter(function(a){return a.deleted == false})
    });
    }

演示 here

AngularJS - 如果属性等于 true，则删除嵌套对象

AngularJS - Removing nested object if attribute equals true

angularjs-ng-repeat

splice