Javascript 使用ng repeat和条件填充表

我是angular（2周大）的新手，我很难理解表格的正确实现，表格中填充的数据来自

$scope

更具体地说。我有一个用硬编码的时间数组填充的表（即

[{“time”：“8:00-8-30”}，

）：

时间
地位
联系人
{{time.time}
打开
---

我还有另一个

$scope

元素，其中包含一个名为

$scope.reservations

的对象数组。模型中的数据如下所示：

我试图做的是在第二列（状态）中放置一个条件，如果

$scope.reservations.timeSlot={{time.time}}

，则显示一个特定的

div

（在这种情况下，

div

将显示“此空间已被占用”。否则，继续显示标记为“打开”的按钮

此条件也将在下一列（联系人）中使用，如果

$scope.reservations.timeSlot=={{time.time}}

，则使用

$scope.reservations.NetID

显示

div

。否则，继续显示“--”

我知道我不得不用另一个

ng repeat

嵌套一个

ng repeat

，可能还有一个

ng show

？但我正在绞尽脑汁思考如何使用正确的语法来实现这一点。有人知道填充这样一个表的最佳方法吗

更新：我创建了一个plunker来重现问题：

---

非常感谢您的帮助，如果您对我有任何问题或顾虑，请不要犹豫。我希望能够实现这一点，并真正了解正在发生的事情。我希望大家今天过得愉快！

对于您来说，最好的解决方案是在您提交之前处理您收到的数据（从服务器获取时，或在发送到客户端之前在服务器上获取时）

如果您的数据如下所示：

$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>
...

。。。
{{time.time}
打开
---
{{time.reservation.NetId}
...

您可以使用

$index

和

ng repeat

来使用

reservation

数组中的相应对象

如果

$scope.reservations.timeSlot=={{time.time}}

与否，使用

ng show

/

ng hide

显示/隐藏，以及类似的结果

<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>

时间
地位
联系人
{{time.time}
已经采取
打开
{{reservation[$index].netID}
--- 

我觉得您的客户端信息太多了。确认码不应该出现在客户端，除非您想显示它（根据您的描述，这听起来不正确）plnkr总是有助于再现问题，并以更简洁的方式说明问题manner@Yaron你是对的，目前我在$scope.reservations中有太多的信息。我有来自mongodb的信息，并且没有在db.collection.find（）上添加投影尚未提取。一旦我可以正确显示返回的数据，我将缩小数据量，并删除我不需要的数据。我喜欢此解决方案，但它似乎无法完全遍历$scope.reservations对象数组。它在第一个时隙中工作，但在不同时间进行的任何其他保留都会得到更新。我需要将ng在任何地方重复，以获得每个“时间”查看所有$scope.reservations对象并检查其.timeSlot？

reservation[$index]

正在遍历保留数组。因此它应该可以做到这一点。这似乎不会遍历

保留

数组中的每个

保留

对象。在每一行上循环的任何机制都需要类似于

角度.forEach（保留）

，并将1

时间

与

保留

数组中的所有

保留时间段

进行比较。如果这有助于演示的话，我制作了一个Plunker。我同意，如果我将时刻表数据与实际保留数据耦合，会更容易。鉴于kKnowledge，您认为使用您的解决方案，最好在angularjs服务中进行这种类型的数据格式化，然后推送到客户端（正如您在这里演示的那样）？我只想确保我正在以最好的方式进行此操作，因为我知道频繁的更新会发生。a）你有你的控制器，在那里你持有

$scope

-你可以用它来格式化数据。b）socket.io不会改变任何东西。c）如果我这样做，我可能会在数据发送到客户端之前更改服务器中的数据。u我尝试了你的建议，但最终不得不恢复到将

时间与实际预订。虽然上面没有提到，但是有多个房间可以预订。最终发生的情况是，如果房间从A房间切换到B房间，那么B房间也会显示A房间的所有“预订”位置。我想这是因为$scope.times在所有房间中共享。解决方法是每次我换房间时都要设置$scope.times数据，但是如果这个条件格式可以用指令处理，那就太多了。所以你应该把
时间
放在
房间
里面（例如
房间.times.reservation
）-从业务逻辑的角度来看，这也会带来更多好处-如果你想在未来为不同的房间留出不同的时间，这是个好主意
<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>