Question

我正在建立一个离子待办事项列表应用程序。我正在使用删除功能，您单击删除按钮，它将删除列表项，但我有问题，无法解决。删除按钮显示，但是当你点击它时没有任何反应。

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);
  };


})

Answer 1

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

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

Answer 2

用于ng-repeat使用

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

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

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

Answer 3

根据您的codexample，您注释掉了remove（task）函数，您需要在HTML中定位removeItem（index）函数

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

而不是静态索引号，将items / index本身提供给泛型函数，然后删除该数组项，如下所示：

 $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

从列表Ionic中删除项目

3 个答案: