ng-repeatと条件付きの表を移入する

Question

私はかなり新しい角度（2週間）ですが、$scopeから派生したデータで構成された表の適切な実装の理解に問題があります。

具体的には、私は$scope.reservationsと呼ばれるオブジェクトのアレイを有する別の$scope要素を有する

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

：私は時間のハードコード配列（すなわち[{ "time": "8:00 - 8 - 30"},...）で移入いテーブルを有しています。モデル内のデータが次のようになります。私がしようとしています何

、$scope.reservations.timeSlot == {{time.time}}場合は、このケースでは、特定のdivを（表示する第二のカラム（状態）で、条件を入れています

$scope.reservations.timeSlot == {{time.time}}の場合、この条件は次の列（連絡先）でも使用されます。この場合、次のように表示されます。「$scope.reservations.timeSlot == {{time.time}}」と表示されます。 divを$scope.reservations.NetIDとし、それ以外の場合は、 "---"を表示し続けます。

私は何とかng-repeatを別のng-repeat、おそらくはng-showにネストする必要があることを知っていますか？私はこれを達成するための正しい構文について私の頭を包み込むことに苦労しています。誰かがそのようなテーブルに値を設定するのに最適な方法を知っていますか？

UPDATE：ここで私は問題を再現するために作成さplunkerです：example Plunker

任意の助けいただければ幸いです、そしてあなたは私のために何か質問や懸念がある場合は、お気軽にお問い合わせください。私はこれを実装し、何が起こっているのかを実際に理解できるようにしたい。私はあなたが良い一日を持つことを願っています！あなたはそれを提示する前に、あなたの場合は、あなたのケースで

Answer 1

ベストソリューション（サーバーまたはサーバー上でそれを得るとき、それはクライアントに送信されているいずれかの前に）、

をあなたが受け取ったデータを操作することになりますデータがこのように見えた：

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

次に、あなたがと$indexを使用することができます

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

ような何かを行うことができます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>