Adding delete-button in ion-list broken


#1

I’ve tried to add a ion-delete-button into my ion-list, but when I do that I get this error message in the console:

Error: [$compile:ctreq] Controller ‘ionList’, required by directive ‘ngClick’, can’t be found!

This is my code:

<ion-view title="Alarm">
<ion-nav-buttons side="left">
    <button class="button button-clear" ng-class="{'text-bold': showDelete}" ng-if="alarms.length" ng-click="shouldShowDelete()">
        {{showDelete ? 'Done' : 'Edit'}}
    </button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
    <button class="button-icon icon ion-ios7-plus-empty"></button>
</ion-nav-buttons>

<ion-content class="has-header">

    <ion-list
        show-delete="showDelete"
        can-swipe="false">

        <ion-item
            class="item-collection item-alarm"
            ng-class="{disabled: !alarm.active, 'item-icon-right': showDelete}"
            collection-repeat="alarm in alarms"
            collection-item-height="100">
            <ion-delete-button class="ion-ios7-minus-outline" ng-click="delete(item)"></ion-delete-button>
            <h2>{{alarm.expiration | time}}</h2>
            <p>
                <span class="text-bold">{{alarm.title}}</span>
                <span ng-if="alarm.repeat">, Weekly{{alarm.repeat}}</span>
            </p>
            <label class="toggle toggle-balanced" ng-hide="showDelete">
                <input type="checkbox" ng-model="alarm.active" ng-change="update(alarm)">
                <div class="track">
                    <div class="handle"></div>
                </div>
            </label>
            <ion-option-button class="button-assertive">
                Delete
            </ion-option-button>
            <i class="icon ion-ios7-arrow-right" ng-show="showDelete"></i>
        </ion-item>

    </ion-list>

</ion-content>

Here is my controller:

.controller('AlarmCtrl', function($scope, $Alarm) {
// Handle updating of alarm
$scope.update = function(alarm) {
    console.log(alarm);

    var updatedAlarm = new $Alarm(alarm);
    updatedAlarm.$save(function() {

    });
};

// Handle deletion of item
$scope.delete = function(item) {
    console.log('Deleting');
    // $scope.alarms.splice(item, 1);

    // Delete in backend
};

// Handle click on edit
$scope.shouldShowDelete = function() {
    $scope.showDelete = !$scope.showDelete;
};

// Get alarms
$Alarm.get(function(response) {    
    $scope.alarms = response.data;
})

})

I’m using Ionic nightly version v1.0.0-beta.5b-nightly-2129.


#2

Can you try this with the latest nightly builds, 1.0.0-beta.5b-nightly-2161


#3

Still gives the same error. I even tried with the latest version as of now: v1.0.0-beta.6-nightly-2206.

I noticed that using ng-repeat instead of collection-repeat does fix the problem. However, I would really like to use the latter because of its performance boost with big lists.


#4

I have the same problem with delete-button and collection-repeat in the latest official version 1.0.0-beta.9 “gadolinium-gator” (2014-07-02).
Do you have any issue to fix this problem?
THank you.
I have an other suggestion for the ion-option-button If i Swipe one element “A” and i scroll down after ten items appear a new element “B” rendered just swiped.
I think that is better to close all not rendered items. :slight_smile:


#5

hmm, good catch on the option button.
Kind of a funny issue if you ask me :smile:

I’ll open an issue for this.

As far as the other issue, using the nightly builds will resolve that.