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
Post a Comment