Creating and updating the global list with with angularjs in ionic

Question

I try to declare a global list in my ionic project with rootScope variable. My aim is to update this list with specific messages. According to my scenario, I have different views with their forms. I try to hold completed actions in another view in the application. When I press the button of "x" form, "x form is completed" message should be pushed into that global list. After that, when I press the button of "y" form, "y form is completed" message should be appended to that list. Then, I display the content of global list in the completed action view.

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

Also, I connected those views with a controller in the controller.js file below:

I created a global list using rootScope for other controllers to reach that list values

 .controller('MainCtrl', function($scope, $rootScope, $state) {

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

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

 .controller('CompletedCtrl', function($scope,$rootScope,$state) {

    $scope.buttons = $rootScope.buttons;

    $scope.onCompletedButtonClick = function(){
    $state.go('app.homepage');  

  }

})

Completed Actions view (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 I run my mobile application, I can not display all pushed items from the list, I only see the first pressed button message in the completed actions in screenshot1. How could I solve this problem?screenshot1 screenshot2

Tal Bussel · Accepted Answer · 2016-12-24 20:33:58Z

2

You wrote "message should be appended to that list."

but you clean it each time a button is clicked.

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

answered Dec 24, 2016 at 20:33

Tal Bussel

1163 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gizem Over a year ago

Thank you for your suggestion:) But when I carry $rootScope.buttons[] declaration outside the function in the controller, I encounter the same problem, again I see only one message of the button which is pressed at that moment. I think I am doing something wrong with the usage of $rootScope. My aim is to declare a global list and each time the controller works , that list should be updated through button pressed. Maybe the fault stems from the 'MainCtrl' because when it is triggered the array is reinitialized and become empty. What can you suggest me to solve it ?

Ram_T · Accepted Answer · 2016-12-25 10:16:42Z

2

Working 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 push duplicates track by $index should be there. Otherwise, you will unable to push, an error will be thrown

Working code

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

The list will definitely update but if you didn't use ng-repeat="item in buttons track by $index", The above code will throw an error if you push dupes. So, add track by $index to get the desired result

edited Dec 25, 2016 at 10:16

answered Dec 25, 2016 at 7:12

Ram_T

8,50411 gold badges42 silver badges64 bronze badges

9 Comments

Gizem Over a year ago

Thank you for your suggestion:) But when I carry $rootScope.buttons[] declaration outside the function in the controller, I encounter the same problem, again I see only one message of the button which is pressed at that moment. I think I am doing something wrong with the usage of $rootScope. My aim is to declare a global list and each time the controller works , that list should be updated through button pressed. Maybe the fault stems from the 'MainCtrl' because when it is triggered the array is reinitialized and become empty. What can you suggest me to solve it ?@Tal Bussel

Ram_T Over a year ago

Check the console. There may be an error of dupes. Tell me if it is there?

Gizem Over a year ago

I added the statament that you offered, but I can not solve it, maybe the problem is about the relationship between controllers and views. I could not implement the global array logic and display the content of it in another page. Also I checked the errors with consolelogs command but see nothing.

Gizem Over a year ago

It is very interesting that when I click buttons for three or four times, I only see the message of one button but after clicking the buttons repeatedly I can see the content of the list with more than one message. There is an error with the declaration of global list I think.

Ram_T Over a year ago

Make a plunker of your code. Put it in your question

|

Collectives™ on Stack Overflow

Creating and updating the global list with with angularjs in ionic

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related