如何在AngularJS和UI-Bootstrap的模態函數之後在視圖中保存成功圖標？ （Plunker）

Question

我正在做一些與我創建的this plunker類似的東西。

在我的應用程序中，我使用的是Firebase/AngularFire。

在闖入者中，您可以看到當您登入會議時，圖標變爲成功圖標。在我的應用程序，這是在哪裏儲存像這樣的火力地堡這些信息：

$scope.join = function(hash) { 
     console.log(hash); 

     var ref = dbRef.ref('meetings/'+hash+'/users') 

     var meetingInfo = $firebaseArray(ref); 

     meetingInfo.$add({ 
      date: firebase.database.ServerValue.TIMESTAMP, 
      user_name: $scope.name, 
      user: $scope.currentUser 
     }).then(function(ref) { 
      var key = ref.key; 
      var index = meetingInfo.$indexFor(key); 
      console.log(key, index); 

      $uibModalInstance.close(); 
     }); 
    }; 

所以得到的數據加入到火力地堡，然後模態關閉。

我也有一個類似的控制器和視圖列出會議，就像在蹲點。

在榨汁機中，我通過$rootScope發送變量，因此可以在listingController中訪問。這是有效的，但正如您所看到的，我只能簽到一次會議，並且在刷新或簽入另一次會議後，複選標記消失。

我想知道如何堅持這一改變，以便我在任何時間登記入住會議時都會留下複選標記。我想我需要在列表控制器中編輯某些內容，以便在抓取數據時檢查是否有人登錄了會議並顯示覆選標記，以下是我的Firebase列表控制器：

app.controller('listController', ['$scope', '$rootScope', '$firebaseArray', '$firebaseObject', '$uibModal', function($scope, $rootScope, $firebaseArray, $firebaseObject, $uibModal) { 
    var ref = firebase.database().ref('meetings'); 

    var list = $firebaseObject(ref); 

    list.$loaded().then(function(data) { 
     $scope.lobbies = list; 
    }); 

}]); 

編輯

的方式火力地堡存儲的數據是這樣的：

---meetings 
------random hash (key) 
---------date 
---------name 
---------attendees 
------------random hash 
---------------date 
---------------name 

當我做我的NG-重複是這樣的：ng-repeat="(key, meeting) in meetings"這樣我就可以訪問類的會議數據meeting.name。我應該如何訪問與會者來檢查當前用戶是否在參加會議？

SOLUTION

This question幫了我很多除了提供IDAN

Answer 1

你需要決定你這個數據，以及如何在HTML代碼段。例如，您可以在會議中列出與會者列表。喜歡的東西：

{ 
    users: { 
    userid1: { 
     name: 'Someone' 
    }, 
    userid2: { 
     name: 'Someone else' 
    } 
    // ... 
    }, 
    meetings: { 
    meetingid1: { 
     location: 'Somewhere', 
     title: 'Gala', 
     attendees: { 
     userid1: true, 
     userid3: true 
     // ... 
     } 
    } 
    // ... 
    } 
} 

然後你就可以檢查用戶出席會議時更改的按鈕。

另外ng-if那裏改變按鈕顯得太多了。你可以在按鈕和圖標上使用ng-class，那麼你只有一個按鈕而不是兩個。

<button class="btn btn-sm" ng-click="open(meeting)" ng-class="user.$id in meeting.attendees ? 'btn-success' : 'btn-primary'"> 
    <i class="fa" ng-class="user.$id in meeting.attendees ? 'fa-check' : 'fa-sign-in'"></i> 
</button> 

一兩件事：強烈建議閱讀Angular style guide 1和Angular style guide 2。兩者都包含很好的提示，可以幫助您輕鬆維護應用