从 Ionic 列表中删除项目答案

【问题标题】：Delete item from list Ionic从 Ionic 列表中删除项目
【发布时间】：2016-08-17 18:49:45
【问题描述】：

我正在构建一个离子待办事项列表应用程序。我正在开发一个删除功能，您可以在其中单击删除按钮，它将删除列表项，但是我遇到了问题并且无法弄清楚。删除按钮显示，但当您单击它时没有任何反应。

HTML：

 <ion-view view-title="To-Do">
  <ion-content class="padding">



    <!-- http://ionicframework.com/docs/components/#bar-inputs -->
    <div class="bar bar-header item-input-inset">
      <label class="item-input-wrapper">
        <i class="icon  placeholder-icon"></i>
        <input type="text" ng-model="item.name" placeholder="Enter Task Here">
      </label>
      <button class="button ion-ios-plus-outline" ng-click="addItem(item)">

      </button>
    </div>

    <ion-list>
      <ion-item class="item-remove-animate" ng-repeat="item in items" >
        <h3>{{item.name}}</h3>
        <ion-option-button class="button-assertive ion-trash-a" ng-click="remove($index)"></ion-option-button>
      </ion-item>
    </ion-list>


  </ion-content>
</ion-view>

控制器：

 .controller('ShortTermCtrl', function($scope, Task) {

  $scope.data = Task.data;


  $scope.items = [];
  $scope.item = {};

  $scope.addItem = function (item) {
    $scope.items.push(item);
    $scope.item = {name: ""};

  };

  $scope.removeItem = function(index){
    $scope.items.splice(index, 1);
  };


})

【问题讨论】：

将函数名称从 remove 更改为 removeItem。
非常感谢！那行得通，问题是我一直在看代码，以至于我没有看到它！谢谢
您是否要将您的评论更改为答案，以便我可以将其标记为已解决/答案以供其他人查看？

标签： javascript html arrays ionic-framework

【解决方案1】：

您在视图中使用了错误的函数名称。将其从remove 更改为removeItem：

<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem($index)"></ion-option-button>

【讨论】：

我在这里得到了添加和删除函数的代码：chat.stackoverflow.com/rooms/88039/… 和 @Alexander Man 指出了我的错误，我在 html 文件中将我的函数命名为错误的。谢谢。

【解决方案2】：

用于 ng-repeat 使用

ng-repeat='(index, item) in items'

跟踪每个项目的索引，并将索引传递给删除函数

ng-click="removeItem({{index}})"

【讨论】：

【解决方案3】：

根据您的代码示例，您注释掉了 remove(task) 函数，您需要在 HTML 中定位 removeItem(index) 函数

<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem(1)">

代替静态索引号，将项目/索引本身提供给通用函数，然后删除该数组项目，如下所示：

 $scope.removeItem = function(items, index){
  items.splice(index, 1);
 };

您的 HTML 将如下所示：

<ion-option-button class="button-assertive ion-trash-a" ng-click="removeItem(items, $index)">

$index 会自动暴露给您的 ng-repeat 范围以及其他有用的属性，您可以在 ng-repeat 的文档中阅读更多信息：https://docs.angularjs.org/api/ng/directive/ngRepeat

【讨论】：