リストから項目を削除するIonic

Question

私はリストアプリをやるためにionicを構築しています。 私は削除ボタンをクリックすると、リスト項目を削除する削除機能に取り組んでいるが、私は問題を抱えているとそれを把握することはできません。 削除ボタンが表示されますが、クリックすると何も起こりません。

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> 

はコントローラー：NG-繰り返し使用するために

.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

誤った関数名を使用しています。 removeremoveItemから、それを変更します。

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

Answer 2

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

すべてのアイテムのインデックスを追跡し、にインデックスを渡します機能を削除する

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

Answer 3

あなたcodexampleごとに、あなたは、remove（タスク）関数をコメントアウトしたように、あなたのHTMLに

​​

をremoveItem（インデックス）機能をターゲットにする必要がある代わりに、静的なインデックス番号の、アイテムを提供/一般的な機能に、インデックス自体、そのようにように、その配列項目を削除します。

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

あなたのHTMLがそうのようになります。

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

$インデックスは他の有用なプロパティの中でng-repeatスコープに自動的に公開されます.ng-repeatのドキュメントで詳細を読むことができます。https://docs.angularjs.org/api/ng/directive/ngRepeat