如何在 AngularJS 和 UI-Bootstrap 模态函数后在视图中保留成功图标？ （笨蛋）

Question

我正在制作与我创建的 this plunker 类似的东西。

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

在 plunker 中，您可以看到当您 check-in 参加会议时，图标会变为成功图标。在我的应用程序中，这是我在 Firebase 中存储该信息的地方，如下所示：

$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();
        });
    };

所以数据被添加到 Firebase，然后模式关闭。

我也有一个类似的控制器和视图，用于列出会议，就像在 plunker 中一样。

在 plunker 中，我通过 $rootScope 发送了一个变量，因此可以在 listingController 中访问它。这行得通，但如您所见，我只能 check-in 参加一个会议，在我刷新或 check-in 参加另一个会议后，check-mark 消失了。

我想知道如何保留此更改，以便任何时候我 check-in 去开会 check-mark 都会留下来。我在想我需要在我的列表控制器中编辑一些东西，这样当它获取数据时，它可以检查是否有人已经签到会议，并显示复选标记，所以这是我的 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;
    });

}]);

编辑

Firebase 存储数据的方式是这样的：

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

当我执行 ng-repeat 时，它是这样的：ng-repeat="(key, meeting) in meetings" 这样我就可以像 meeting.name 一样访问会议数据。我应该如何访问与会者以检查当前用户是否在会议中？

解决方案

除了 idan 提供的 HTML 片段

之外，还帮了我很多忙

Answer 1

您需要决定保存这些数据的位置和方式。 例如，您可以保留会议中的与会者列表。类似于：

{
  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 and Angular style guide 2。两者都包含帮助您轻松维护应用程序的重要提示。