I need help with displaying two tables, one for profiles and the other for rates. The rates are connected to profiles through the rate name in the JSON data. Is there a way to show these two tables side by side? And when a row is selected in the profile table, can we automatically display the associated rate names in the rates table?
Sample JSON data:
[
{
"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"
]
}
]Angular code snippet:
$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" />
</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" />
</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>