list - collection-repeat and ion-option-button issues (again!) -


i writing application using socket.io , ionic. have handle list of 6000 people i've decide use collection-repeat , swipe + ion-option-button verify items (remove list) names on list can removed , changes broadcasted rest of apps using sockets have own list updated in real-time if if list change, each row assigned new data html stays same, including state of swiped button!

here screen recording of bug: https://youtu.be/15ozj7g1dq0

you can see list shrinking because user removing items list , broadcasting me through websockets, button doesn't move along item , stays in same place.

the problem doesn't happen ng-repeat can't use ng-repeat this. , can't use $ioniclistdelegate.closeoptionbuttons() go around problem because can annoying users.

there possible solution this?

resumed code sample:

1) people controller

$rootscope.verify = function(){      this.person.verified = true;      //broadcast main controller     $rootscope.$broadcast('verify', this.person) } 

2) main controller (aka socket controller)

  $rootscope.$on('verify', function(e, person) {     //send socket server     socket.emit('event:verify', person);    });    //incoming data socket server   socket.on('event:incoming',function(persondata){      var person = $filter('filter')($scope.people, {id: persondata.id}, true)[0];             var key = $scope.people.indexof(person);      $scope.people[key].verified = persondata.verified;   }); 

so if @ example: http://play.ionic.io/app/a8d986cdaf19

 <!doctype html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">     <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">     <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>   </head>   <body ng-app="app">     <ion-pane>       <ion-header-bar class="bar-stable">         <h1 class="title">awesome app</h1>       </ion-header-bar>       <ion-content class="padding"> <ion-list>   <ion-item>     love kittens!     <ion-option-button ng-if="item" class="button-positive">share</ion-option-button>     <ion-option-button class="button-assertive">edit</ion-option-button>    </ion-item> </ion-list> <ion-toggle ng-model="item">   show delete? </ion-toggle>       </ion-content>     </ion-pane>   </body> </html> 

you can use ng-if show or hide optoin button, can broadcast event when item removed , hide option button variable can toggle based on event.

 $scope.$emit('objectremoved'); 

and then:

$scope.$on('objectedremoved', function(){     $scope.variabletocontrolverifybutton = false; }) 

if post code may able more hope general idea.


Comments

Popular posts from this blog

dns - How To Use Custom Nameserver On Free Cloudflare? -

python - Pygame screen.blit not working -

c# - Web API response xml language -