使用ng-repeat和条件

Question

我对角度（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会说＆＃34;这个空间已经被占用了）。否则，继续显示标有＆＃34;打开＆＃34;的按钮。

此条件也将用于下一列（联系人），如果$scope.reservations.timeSlot == {{time.time}}，则显示div $scope.reservations.NetID。否则，继续显示＆＃34; ---＆＃34;。

我知道我不得不将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> ，以及类似的结果。

document.getElementById("edName").style.display === 'none' ? document.getElementById("edName").required = none : document.getElementById("edName").required = true;