如何从 Firebase 创建复杂的 AngularJS 数据绑定？

Question

我正在开发一个带有 Firebase 后端的基本 AngularJS 应用程序。部分数据库看起来像...

Student
- FirstName
- LastName
- Schedule
-- Course1
-- Course2...

我有一个页面显示 html table 有 ng-repeat 的学生。这是我的 table...

的代码

<table>
<thead>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Youth/Adult</th>
  <th>Courses Selected?</th>
  <th>...</th>
</thead>
<tbody>
  <tr ng-repeat="(id, student) in students">
    <td>{{ student.firstName }}</td>
    <td>{{ student.lastName }}</td>
    <td>{{ student.type }}</td>
    <td>{{ student.hasSelectedCourses }}</td>
    <td>...</td>
  </tr>
</tbody>

将数据和 table 连接在一起的控制器非常简单。它只是从 Firebase 中获取学生数组并将其放入 $scope。

$scope.students = Students;

我正在获取学生的名字和姓氏，所以我知道重复一般有效。但是我在想要显示的某一列上遇到困难 - 所选课程？柱子。我想根据数据库中 Student 的 existance 智能地用布尔值（可能是图标或其他东西）填充它。我想在我的控制器中添加类似这样的东西（不要笑 - 还在学习 JavaScript）。这没有用。错误是 "student" 未定义。

$scope.student.hasSelectedCourses = !($scope.student.schedule === null);

我想我可以用另一种方式来做到这一点，我实际上将 hasSelectedCourses 作为布尔值存储在数据库中，但我担心该字段的完整性以及学生选择的课程和该字段的情况彼此不同步。

有没有办法通过一些逻辑而不是数据存储来完成此操作，或者将其存储在数据库中？

Answer 1

如果未选择任何课程（这是 firebase 的正常模式），则假设 student.schedule 为 null：

<tbody>
  <tr ng-repeat="(id, student) in students">
    <td>{{ student.firstName }}</td>
    <td>{{ student.lastName }}</td>
    <td>{{ student.type }}</td>
    <td>
        <span ng-if="student.schedule">Yes<span>
        <span ng-if="!student.schedule">No<span> <!-- these spans could be icons or whatever you want -->
    </td>
    <td>...</td>
  </tr>
</tbody>

或者

    <td>
        {{student.schedule ? 'Yes' : 'No'}}
    </td>

旁注：如果您还没有将 AngularFire 包含在您的应用程序中是非常值得的。现场三向绑定是一种给人留下深刻印象的好方法。

如何从 Firebase 创建复杂的 AngularJS 数据绑定？

How do you create complex AngularJS data bindings from Firebase?

angularjs

firebase