Question

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

我有一个UI，其中表中有几行嵌套数据。用户将点击＆＃34;删除＆＃34;在任何行中开始删除给定的行。然后（这就是我挣扎的地方）他们会点击＆＃34;删除已删除的项目＆＃34;删除所有具有＆＃34;已删除＆＃34;的嵌套对象属性设置为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})
    });
    }

demo here

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

1 个答案: