Create and update a global list using angular in ion

Question

I am trying to declare a global list in my ion project with the variable rootScope. My goal is to update this list with specific messages. In my scenario, I have different views with their forms. I am trying to execute the performed actions in another view in the application. When I click the "x" form button, the message "x form completed" should be sent to this global list. After that, when I click the "y" form button, the message "y form completed" should be added to this list. Then I show the contents of the global list in the completed action view.

In each view, I have a button as shown in the screenshot.

In addition, I connected these views to the controller in the controller.js file below:

I created a global list using rootScope for other controllers to achieve the values ​​of this list

.controller('MainCtrl', function($scope, $rootScope, $state) { $rootScope.onButtonClick = function (obj) { $rootScope.buttons = []; $rootScope.buttons.push(obj); $state.go('app.completed'); } }) 

Then I connected the Completed Actions view with another controller to display the final list view, to see all the buttons pressed in the application:

  .controller('CompletedCtrl', function($scope,$rootScope,$state) { $scope.buttons = $rootScope.buttons; $scope.onCompletedButtonClick = function(){ $state.go('app.homepage'); } }) 

View completed actions (html file):

  <span style="color:white">COMPLETED TravelBuddy</span> </ion-nav-title> <ion-content> <div class="list"> <ion-list> <ion-item ng-repeat="item in buttons"> {{item}}! </ion-item> </ion-list> <label class="item"> <button class="button button-block button-balanced" ng-click="onCompletedButtonClick()">+</button> </label> </div> </ion-content> 

After starting my mobile application, I can’t display all the dragged items from the list, I see only the first button message clicked in the completed actions in screenshot1. How can I solve this problem? screenshot1 screenshot2

Answer 1

You wrote: "The message should be added to this list."

but you clear it every time the button is pressed.

move this line from onButtonClick: rootScope.buttons = [];

Answer 2

Work plunker https://plnkr.co/edit/Y2cJrUGYcygvM9i6wKx5?p=preview

  <ion-item ng-repeat="item in buttons track by $index"> {{item}}! </ion-item> 

If you want to click duplicates, then track by $index should be there. Otherwise, you cannot click, the error will be thrown

Working code

 $rootScope.buttons = []; $rootScope.onButtonClick = function (obj) { $rootScope.buttons.push(obj); $state.go('app.completed'); } 

The list will certainly be updated, but if you have not used ng-repeat="item in buttons track by $index" , the above code will dupes error if you press dupes . So add track by $index to get the desired result