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

score 2 · Answer 1 · answered Dec 24 '16 at 20:33

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 '16 at 20:33

Tal Bussel

116
3

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 ? – Gizem Dec 25 '16 at 09:49

Mr_Perfect · Answer 2 · 2016-12-25T10:16:42.423

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 '16 at 10:16

answered Dec 25 '16 at 07:12

Mr_Perfect

8,254
11
35
62

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 – Gizem Dec 25 '16 at 09:41
Check the console. There may be an error of `dupes`. Tell me if it is there? – Mr_Perfect Dec 25 '16 at 10:03
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 Dec 25 '16 at 10:39
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. – Gizem Dec 25 '16 at 10:45
Make a plunker of your code. Put it in your question – Mr_Perfect Dec 25 '16 at 10:59
I put my html and js files in your plunker, you can find it thank you again:) – Gizem Dec 25 '16 at 11:18
No, thats a private plunk. I didn't find any such files – Mr_Perfect Dec 25 '16 at 11:20
Oh sorry:( I missed it while responsing your message:) you can find it from the link https://plnkr.co/edit/DtxplDXpJiWmBhHwCINM?p=preview – Gizem Dec 25 '16 at 11:22
Actually, I do not know the usage of the Plunker because I have not used it before and I am new in ionic and angularjs. I created my files but I do not know visualization of the application in it. I only copy paste my codes. If it is not useful, thank you very much again for your consideration. – Gizem Dec 25 '16 at 12:06

Creating and updating the global list with with angularjs in ionic

2 Answers2