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

时间:2015-05-15 03:43:14

标签: angularjs firebase

我使用Firebase后端处理基本的AngularJS应用程序。数据库的一部分看起来像......

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

我有一个页面显示带有ng-repeat的学生的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。

$scope.students = Students;

我得到了学生&#39;名字和姓氏,所以我知道重复是一般的。但是我在某个特定栏目中遇到了困难,我想要展示 - 选择的课程?柱。我想基于挂起数据库中学生的计划的 existance ,用布尔(可能是图标或其他东西)智能地填充它。我想把这样的东西添加到我的控制器里(不要笑 - 还在学习JavaScript)。这没有用。错误是&#34;学生&#34;未定义。

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

我想我可以用另一种方式做到这一点,我实际上将hasSelectedCourses存储为数据库中的布尔值,但我关注该字段的完整性并进入学生所选课程的情况那个字段彼此不同步。

有没有办法通过一些逻辑而不是数据存储来实现这一点,或者将其存储在数据库中的方式?

1 个答案:

答案 0 :(得分:2)

假设student.schedule为空,如果未选择任何课程(这是使用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与您的应用包含在内,那么非常值得。实时三向绑定是一种令人印象深刻的好方法。