bug: ion-option-button in ion-list strange effect - v.1.0.0 beta 14

[danicomas]

Type: bug

Platform: android 4.4 webview

In beta 13 didn't cause this strange effect. Look this video!
https://www.dropbox.com/s/z288muqb8dk8g1g/IMG_0228.MOV?dl=0

Android 4.4.4 Nexus 4.

<ion-view title="Events">
  <ion-nav-buttons side="left">
    <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content>
    <ion-refresher
        pulling-text="Pull to refresh..."
        on-refresh="doRefresh()"
        refreshing-text="Refreshing!"
        refreshing-icon="ion-loading-c">
    </ion-refresher>
    <ion-list>
      <ion-item 
      collection-repeat="row in rows"
      collection-item-height="160"
      ng-class="rowClass(row)"
      ng-click="navigate(row)" ng-style="{'width':'100%', 'height':'160px'}">
        <h2><b>Id: {{row.id}} Subject: {{row.subject}}<b></h2>
        <h2>Customer: {{row.customercontact}} {{row.customerlocation.customer.name}} {{row.customerlocation.fulladdress}}</h2>
        <h2>Creation: {{row.date}}</h2>
        <h2>Assigned: {{row.assigneduser.username}}</h2>
        <h2>Status: {{row.eventstatus.name}} Level: <b>{{row.eventlevel.name}}<b/></h2>
        <h2>Tracks: <b>{{row.trackscount}}<b/></h2>
        <ion-option-button class="button-assertive" ng-click="edit(row)">Edit</ion-option-button>
        <ion-option-button class="button-positive" ng-click="delete(row)">Delete</ion-delete-button>
      </ion-item>
    </ion-list>
    <ion-infinite-scroll
    on-infinite="loadMore()"
    distance="10%">
  </ion-infinite-scroll>
  </ion-content>
</ion-view>

$scope.delete = function(item) {
        $ionicListDelegate.closeOptionButtons();
        angular.forEach($scope.rows, function(obj, index){
            if(obj.id == item.id) {
                $scope.rows.splice(index, 1);
                return;
            }
        });
    };

[drewrygh]

Haven't had a chance to look into this yet, but can't you just pass the index to the delete function? This would remove the need for the inner loop, which can be a performance hit and might be causing the flickering:

  $scope.delete = function(item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
  }

[danicomas]

@drewrygh This is not the solution. Look this with your code (option buttons is not closed)

If I try

$scope.delete = function(item) {
        $scope.rows.splice($scope.rows.indexOf(item), 1);
        $ionicListDelegate.closeOptionButtons();
    };

The options are closed but sometimes cause a strange effect (open and close options of another row list)

In the old version (beta 13) worked well!

[danicomas]

@drewrygh @mhartington my code pen:

http://codepen.io/danicomas/pen/ByWoRP

Open in a new browser. Scroll, swipe, and delete an item. Delete some items because sometimes works good.

[mhartington]

Duplicate of #1811

[PradeepSmg]

ng-class not working when combined with ion-option-button inside ion-item tag.

Here is my snippet:

HTML:

<ion-list class="list">
<ion-item ng-repeat="task in tasks | filter:searchText" class="item item-text-wrap item-icon-left"
 ng-click="onEditTask(task)"  ng-class="{'grey_background': task.status != 'Pending' && task.status != 'Overdue'}">

    <ion-option-button class="button-assertive"  ng-click = "onDeleteTask(task)">
            <i class = "icon ion-trash-a"></i>
    </ion-option-button>

      <p><span style="font-weight: bold;color: black">Description: </span>{{task.description}}</p>
      <p><span style="font-weight: bold;color: black">Status: </span>{{task.status}}</p>

</ion-item>
</ion-list>

CSS:

.grey_background {
    background-color: #dfdfdf;
}

This code should change background color to grey if ion-item having task.status other than Pending or Overdue but it does not.
If I remove ion-option-button tag it works as expected.