javascript - 用即时图标替换使用 angularjs 生成的 html 表中的文本

Question

我有一个 html 页面，其中包含一个包含日期、staffID 和类次的表格。 Shift 的值为 0(上午)或 1(下午)。生成如下:

function staffSchedule ($scope, $http) {
  $http
    .get('/api/schedule/2017/02')
    .then(function(response) {
      var data = response.data;
      $scope.shifts = data;
      console.log(data);
    })
    .catch(function(errorResponse) {
      console.log('Error: ' + errorResponse.status);
    });
}

<table>
  <tr>
    <th>Date</th>
    <th>StaffID</th>
    <th>Shift</th>
  </tr>
  <tbody ng-repeat="shift in shifts">
    <tr>
      <td>{{shift.staffid}}</td>
      <td>{{shift.date}}</td>
      <td>{{shift.type}}</td>
    </tr>
  </tbody>
</table>

该代码按其应有的方式返回数据，但我想扩展它以执行更多操作。

我希望代码动态地将 0 替换为 Fontawesome sun <i class="fa fa-sun-o" aria-hidden="true"></i>和 1 代表 Fontawesome 月亮 <i class="fa fa-moon-o" aria-hidden="true"></i> 。知道如何用我当前的设置来做到这一点吗？

Answer 1

以下是我在代码中所做的使其正常工作的内容。

<td>
  <i class="fa" ng-class="{'fa-hourglass-start':schedule.shift==0,
                           'fa-hourglass-end':schedule.shift==1}">
  </i>
</td>

解释一下:

1. 从 font Awesome 中获取我的图标 http://fontawesome.io/
2. ng-repeat 通过 AngularJS 接收来自 RESTful 调用的请求
3. 记录中的某个字段返回“0”或“1”(始终；必填字段)
4. 如果为 0，则使用 fa-hourglass-start；如果为 1，则使用 fa-hourglass-end。