Populating a table with ng-repeat and conditionals

Question

I am fairly new to angular (2 weeks old), and I am having trouble understanding the proper implementation of a table, populated with data that is derived from the $scope.

To be more specific. I have a table that I am populating with a hardcoded array of times (i.e. [{ "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>

I have another $scope element with an array of objects called $scope.reservations. The data in the model looks like this:

What I am attempting to do is put a conditional in the second column (status) where if the $scope.reservations.timeSlot == {{time.time}}, then display a specific div (in this case, the div would say "this space is already taken). else, continue with displaying the button labeled "Open".

This conditional would also be used in the next column (contact person), where if $scope.reservations.timeSlot == {{time.time}}, then display a div with $scope.reservations.NetID. else, continue with displaying "---".

I know that I somehow have to nest a ng-repeat with another ng-repeat, and possibly a ng-show? but I am struggling with wrapping my head about the proper syntax to accomplish this. Would anyone know the best way to accomplish populating such a table?

UPDATE: here is a plunker I created to reproduce the problem: example Plunker

Any help would be greatly appreciated, and if you have any questions or concerns for me, please do not hesitate to ask. I want to be able to implement this, and actually understand what is going on. I hope you are all having a good day!

Answer 1

you can use $index with ng-repeat to use the respective object from reservation array.

And, use ng-show/ng-hide to show/hide if $scope.reservations.timeSlot == {{time.time}} or not, and similar results.

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

Answer 2

Best solution in your case would be manipulating the data that you received, before you present it (either when you get it from the server or on the server before it is being sent to the client)

If your data looked like this:

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

Then you could do something like

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