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

Question

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

我有一个 UI，其中一个表中有几行嵌套数据。用户将单击任何行中的“删除”以开始删除该给定行。然后（这就是我苦苦挣扎的地方）他们将单击“删除已删除项目”以删除所有“已删除”属性设置为 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