如何在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。两者都包含很好的提示，可以帮助您轻松维护应用