Angularjsと複数のサイド・バイ・サイド・バイ・サイド・テーブル

Question

私は2つのテーブル、プロファイルとレートを持っています。料金は、jsonに戻ってくる料金の名前でプロフィールにリンクされています。 2つのテーブルを並べて表示する方法はありますか？プロファイルテーブルの行を選択すると、そのプロファイルに関連付けられたレート名がratesテーブルに自動的に表示されますか？

JSONスニペット：

[ 
 
    { 
 
    "profileName": "Phone3Bit", 
 
    "profileDescription": "A profile example of 3 bit rates", 
 
    "segmentsToKeep": 15, 
 
    "segmentLength": 10, 
 
    "lmsOutputStreams": [ 
 
     "5Mbit", 
 
     "3Mbit", 
 
     "2Mbit" 
 
    ] 
 
    }, 
 
    { 
 
    "profileName": "PhoneHD1", 
 
    "profileDescription": "3 bit rate profile for phones", 
 
    "segmentsToKeep": 15, 
 
    "segmentLength": 10, 
 
    "lmsOutputStreams": [ 
 
     "4Mbit", 
 
     "3Mbit", 
 
     "2Mbit" 
 
    ] 
 
    } 
 
]

角度スニペット：

$http({ 
 
     method: 'GET', 
 
     url: 'http://192.168.0.3:8080/profiles.json', 
 
     headers: { 
 
      'Accept': 'application/json' 
 
     } 
 
    }).then(function successCallback(response) { 
 
     console.log('ProfileCtrl - $http success!'); 
 
     $scope.profiles = response.data; 
 
     console.log('ProfileCtrl - data: ', response.data); 
 
     console.log('ProfileCtrl - status: ', response.status); 
 
     console.log('ProfileCtrl - headers: ', response.headers); 
 
     console.log('ProfileCtrl - config: ', response.config); 
 
    }, function errorCallback(response) { 
 
      console.log('ProfileCtrl - $http failure!'); 
 
    });

<div class="row"> 
 
     
 
    <!-- Profile Table --> 
 
    <!-- Profile Table --> 
 
    <!-- Profile Table --> 
 
     
 
    <div class="col-lg-6"> 
 
    <rd-widget> 
 
     <rd-widget-header icon="fa-users" title="Profiles"> 
 
      <input type="text" placeholder="Search" class="form-control input-sm" /> 
 
\t </rd-widget-header> 
 
     <rd-widget-body classes="medium no-padding"> 
 
     <div class="table-responsive"> 
 
      <table class ="table"> 
 
      <thead> 
 
       <tr><th>Name</th><th>Description</th><th>Segments To Keep</th><th>Segment Length</th></tr> 
 
      </thead> 
 
      <tr ng-repeat="profile in profiles | orderBy : 'profile.profileName'"> 
 
       <td ng-if="$odd" style="background-color:#f1f1f1">{{ profile.profileName }}</td> 
 
       <td ng-if="$even">{{ profile.profileName }}</td> 
 
       <td ng-if="$odd" style="background-color:#f1f1f1">{{ profile.profileDescription }}</td> 
 
       <td ng-if="$even">{{ profile.profileDescription }}</td> 
 
       <td ng-if="$odd" style="background-color:#f1f1f1">{{ profile.segmentsToKeep }}</td> 
 
       <td ng-if="$even">{{ profile.segmentsToKeep }}</td> 
 
       <td ng-if="$odd" style="background-color:#f1f1f1">{{ profile.segmentLength }}</td> 
 
       <td ng-if="$even">{{ profile.segmentLength }}</td> 
 
      </tr> 
 
      </table> 
 
     </div> 
 
     </rd-widget-body> 
 
     <rd-widget-footer> 
 
     <button class="btn btn-sm btn-info">Add</button> 
 
     <div class="clearfix"></div> 
 
     </rd-widget-footer> 
 
    </rd-widget> 
 
    </div> 
 
     
 
    <!-- Rate Table --> 
 
    <!-- Rate Table --> 
 
    <!-- Rate Table --> 
 
     
 
    <div class="col-lg-6"> 
 
    <rd-widget> 
 
     <rd-widget-header icon="fa-users" title="Rates"> 
 
      <input type="text" placeholder="Search" class="form-control input-sm" /> 
 
\t </rd-widget-header> 
 
     <rd-widget-body classes="medium no-padding"> 
 
     <div class="table-responsive"> 
 
      <table class ="table"> 
 
      <thead> 
 
       <tr><th>Name</th><th>Description</th><th>Segments To Keep</th><th>Segment Length</th></tr> 
 
      </thead> 
 
      <tr ng-repeat="rate in profiles.lmsOutputStreams track by $index'"> 
 
       <td ng-if="$odd" style="background-color:#f1f1f1">{{ $index }}</td> 
 
       <td ng-if="$even">{{ $index }}</td> 
 
      </tr> 
 
      </table> 
 
     </div> 
 
     </rd-widget-body> 
 
     <rd-widget-footer> 
 
      <br> 
 
      <div class="clearfix"></div> 
 
     <p></p> 
 
     </rd-widget-footer> 
 
    </rd-widget> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

何をしたいがselectedProfile OBでありますコントローラで

// first table add ng-click to pass profile to controller 
<tr ng-repeat="profile in profiles | orderBy : 'profile.profileName'" 
    ng-click="selectProfile(profile)"> 

// second table repeat rates for selectedProfile 
<tr ng-repeat="rate in selectedProfile.lmsOutputStreams track by $index'"> 

：JECTとは次のようにそのオブジェクト

何かのために料金を表示するあなただけのスタイリングのために不必要なng-ifの多くを持って

$scope.selectProfile = function(profile){ 
    $scope.selectedProfile = profile; 
} 

---

注意を。これは、単純なCSSだけで行うことができる何かのためのパフォーマンスの問題を引き起こす膨大な量の角型時計を作成します。