使用angularjs創建和更新全局列表

Question

我嘗試使用rootScope變量在我的離子項目中聲明全局列表。我的目標是用特定的消息更新這個列表。根據我的情況，我對他們的形式有不同的看法。我嘗試在應用程序的另一個視圖中執行完整的操作。當我按下「x」形式的按鈕時，「x形式已完成」消息應該被推入該全局列表中。之後，當我按下「y」形式的按鈕時，「y形式已完成」消息應該被追加到該列表中。然後，我在完成的操作視圖中顯示全局列表的內容。

在每個視圖中，我有一個按鈕，如screenshot2所示。

另外，我連接與所述controller.js控制器那些視圖以下文件：

我創建使用rootScope爲其它控制器到達該列表中的全局列表值

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

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

然後我連接與另一個控制器的「已完成操作」視圖顯示列表的最終視圖，以查看應用程序中所有按下的按鈕：

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

    $scope.buttons = $rootScope.buttons; 

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

    } 

}) 

完成操作視圖（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> 

我跑我的移動應用程序後，我不能顯示所有推的項目從列表中，我只看到第一個按下按鈕消息在截圖1中的完成操作中。我怎麼能解決這個問題？ screenshot1screenshot2

Answer 1

您寫道「消息應附加到該列表。」

但每次單擊按鈕時都清理它。

將此行移出onButtonClick：rootScope.buttons = [];

Answer 2

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

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

如果你想推副本track by $index應該在那裏。否則，你將無法推動，錯誤將被拋出

工作代碼

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

名單肯定會更新，但如果你沒有使用ng-repeat="item in buttons track by $index"，上面的代碼將拋出，如果出現錯誤你推dupes。因此，添加track by $index以獲得期望的結果