使用angularjs in ionic创建和更新全局列表

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.

我尝试使用rootScope变量在我的离子项目中声明一个全局列表。我的目标是使用特定消息更新此列表。根据我的情景,我对他们的表格有不同的看法。我尝试在应用程序的另一个视图中保存已完成的操作。当我按下“x”形式的按钮时,“x form is completed”消息应被推入该全局列表。之后,当我按下“y”形式的按钮时,“y form is completed”消息应该附加到该列表中。然后,我在完成的操作视图中显示全局列表的内容。

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

在每个视图中,我都有一个按钮,如screenshot2所示。

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

另外,我将这些视图与controller.js文件中的控制器连接:

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

我使用rootScope为其他控制器创建了一个全局列表,以达到该列表值

 .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:

然后我将Completed Actions视图与另一个控制器连接,以显示列表的最终视图,以查看应用程序中所有按下的按钮:

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

    $scope.buttons = $rootScope.buttons;

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

  }

})

Completed Actions view (html file):

已完成的操作视图(html文件):

    <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

运行我的移动应用程序后,我无法显示列表中的所有推送项目,我只看到截屏1中已完成操作中的第一个按下按钮消息。我怎么能解决这个问题?screenshot1screenshot2

2 个解决方案

#1

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 = [];

将此行移出onButtonClick:rootScope.buttons = [];

#2

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

工作人员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

如果你想通过$ index推送重复跟踪应该在那里。否则,您将无法推送,将抛出错误

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

该列表肯定会更新,但如果您没有使用ng-repeat =“按钮跟踪$ item中的项目”,如果您推送dupes,上面的代码将抛出错误。因此,通过$ index添加跟踪以获得所需的结果

#1