用带有图标的angularjs生成的html表中的替换文本

Question

我有一个html页面，其中包含一个包含日期，staffID和shift的表。 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 moon <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. 从字体真棒http://fontawesome.io/抓住我的图标
2. ng-repeat通过AngularJS接收来自RESTful调用的请求
3. 记录中的一个字段返回'0'或'1'（始终;必填字段）
4. 如果0和fa-hourglass-end为1，则使用fa-hourglass-start。

Answer 2

使用ng-class。

就像是：

<td>
    <i class="fa" ng-class="{'fa-sun':shift.type==0,'fa-moon':shift.type==1}"></i>
</td>

注意我没有验证正确的FA类名称