使用 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？但我正在努力思考完成此任务的正确语法。有人知道完成填充这样一个表的最佳方法吗？

更新：这是我为重现问题而创建的一个 plunker：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>
...

Answer 2

您可以使用$index 和ng-repeat 来使用reservation 数组中的相应对象。

并且，使用ng-show/ng-hide 显示/隐藏$scope.reservations.timeSlot == {{time.time}} 与否，以及类似的结果。

<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>
              <div ng-show="reservations[$index].timeSlot == time.time">Already Taken</div>
              <button type="button" class="btn btn-info btn-lg" ng-click="open(time.time)" ng-hide="reservations[$index].timeSlot == time.time">Open</button>

          </td>
          <td>
               <div ng-show="reservations[$index].timeSlot == time.time">{{reservation[$index].netID}}</div>
               <div ng-hide="reservations[$index].timeSlot == time.time">---</div> 
          </td>
      </tr>
    </tbody>
  </table>