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



i在使用Firebase后端的基本AngularJS应用程序上工作。数据库的一部分看起来像...

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

我有一个页面,显示了带有NG重复的学生的HTML表。这是我表的代码...

<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>

将数据和表连接在一起的控制器确实很直接。它只是从Firebase中抓住了许多学生,然后将其倒入$范围。

$scope.students = Students;

我要获得学生的名字和姓氏,所以我知道重复一般都在起作用。但是,我想显示的一个特定专栏很难 - 选择的课程?柱子。我想根据日程安排的存在在数据库中悬挂的时间表的存在智能地填写它。我想到将类似的东西添加到我的控制器中(不要笑 - 仍在学习JavaScript)。这无效。错误是"学生"不确定。

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

我认为我可以另一种方式在数据库中实际存储HasselectedCourses作为布尔值,但是我担心该领域的完整性并进入一个学生选择的课程和该领域不在的情况彼此同步。

是否有一种方法可以通过一些逻辑而不是数据存储来完成此操作,或者将其存储在数据库中?

假设如果没有选择student.schedule为null(这是firebase的正常模式):

<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与您的应用一起包含。实时3向绑定是给人留下深刻印象的好方法。

最新更新