javascript - 使用 ng-repeat 和条件语句填充表格

Question

我是 Angular 的新手(2 周前)，我无法理解表的正确实现，该表填充了从 $scope 派生的数据。

更具体一点。我有一个表，我用硬编码的时间数组填充(即 [{ "time": "8:00 - 8 - 30"},...):

<table class="table table-hover">
    <thead>
    <tr>
        <th>Time</th>
        <th>Status</th>
        <th>Contact Person</th>
    </tr>
    </thead>
     <tbody>
      <tr ng-repeat="time in times" style="cursor:pointer">
        <td> {{time.time}}
       </td>
          <td>

              <button type="button" class="btn btn-info btn-lg" ng-click="open(time.time)">Open</button>

          </td>
          <td>---</td>
      </tr>
    </tbody>
  </table>

我有另一个 $scope 元素，其中包含一个名为 $scope.reservations 的对象数组。模型中的数据如下所示:

我试图做的是在第二列(状态)中放置一个条件，如果 $scope.reservations.timeSlot == {{time.time}}，则显示特定的div(在这种情况下，div 会说“此空间已被占用”)。否则，继续显示标有“打开”的按钮。

此条件也将用于下一列(联系人)，如果 $scope.reservations.timeSlot == {{time.time}}，则显示 div 与 $scope.reservations.NetID。否则，继续显示“---”。

我知道我必须以某种方式将 ng-repeat 与另一个 ng-repeat 嵌套，可能还有 ng-show？但我正在努力思考正确的语法来实现这一点。谁知道完成填充此类表的最佳方法？

更新:这是我创建的用于重现问题的插件:example Plunker

如有任何帮助，我们将不胜感激，如果您对我有任何问题或疑虑，请随时提出。我希望能够实现这一点，并真正了解发生了什么。我希望你们都过得愉快!

Answer 1

在您的情况下，最好的解决方案是在呈现数据之前处理您收到的数据(当您从服务器获取数据时或在将数据发送给客户端之前在服务器上获取数据)

如果您的数据如下所示:

$scope.times = [{
   "time": "8:00-8:30",
   "reservation":null
},{
   "time": "8:00-8:30",
   "reservation": {
       "_NetId": "1234567"
   }
}]

然后你可以做类似的事情

...
  <tr ng-repeat="time in times" style="cursor:pointer">
    <td> {{time.time}}
   </td>
      <td>

          <button type="button" class="btn btn-info btn-lg" ng-click="open(time.time)">Open</button>

      </td>
      <td>
         <span ng-if="!time.reservation">---</span>
         <span ng-if="!!time.reservation">{{time.reservation.NetId}}</span>
      </td>
  </tr>
...