Question

我正在使用PhoneGap + Onsen UI + AngularJS应用程序，我在视图中有一个列表，其中的项目将从控制器变量中获取。

我希望能够通过点击它们来删除此列表中的项目。

列表如下所示：

<ons-list> 
    <ons-list-item  modifier="tappable" class="item" ng-repeat="citem in completeditems" ng-click="delete(citem)">
        <ons-row>
            <ons-col>
                <div class="titlediv">
                    <header>
                        <span class="item-title">{{citem.name}}</span>
                    </header>
                </div>
                <div class="item-dates">
                    <span class="item-start">{{citem.start}}</span>
                </div>
            </ons-col>
        </ons-row>
    </ons-list-item>
</ons-list>

$ scope中的completeditems对象如下所示：

var completeditemname = "item" + i;
$scope.completeditems[completeditemname] = {
    id : "ID",
    name : "Name for it",
    start: "Start date"
}

尝试了以下方法，但它没有成功：

$scope.delete = function(item) {
    var index = $scope.completeditems.indexOf(item);
    $scope.completeditems.splice(index,1);
    //$scope.completeditems.remove(item); //tried this aswell
    $scope.$apply() //i need this to update the view
}

Answer 1

您不需要$scope.$apply()调用。当您对范围变量进行更改时，无论如何都会触发摘要周期，因此我会遇到错误。

UPDATED :: 您正在使用它的外观处理实际对象，因此我更新了plunker中的代码以帮助您解决问题。这意味着改变ng-repeat以使用键和值。

这是一个简单的plunkr，显示了在删除函数http://plnkr.co/edit/NtQD...中使用单个衬垫尝试执行的操作的基本示例。

<body ng-app="myApp">
  <div ng-controller="myController as ctrl">
    <ul ng-repeat="(key, value) in ctrl.items track by key">
      <li ng-click="ctrl.delete(key)">{{value}}</li>
    </ul>
  </div>
</body>

var myApp = angular.module('myApp', [])
.controller('myController', [
  '$scope',
  function($scope) {
    var self = this;
    self.items  = {
      item1: {
        id: 1,
        name: 'a'
      },
      item2: {
        id: 2,
        name: 'b'
      },
      item3: {
        id: 3,
        name: 'c'
      }
    };
    self.delete = function(key) {
      delete self.items[key];
    };
  }
]);

希望能帮到你！

Answer 2

$ scope。$ apply（）只应在从Angular框架外部进行更改时使用。由于你的delete（）函数是从ng-click调用的，所以它已经由Angular管理，并且调用$ apply（）会引发“$ digest已在进行中”错误（检查你的浏览器控制台）。删除该调用很可能会使您的代码正常工作。

从ng-repeat中删除对象

2 个答案: