Angularjs和多个索引并排表

Question

我有两张桌子，个人资料和费率。费率通过json中返回的费率名称链接到个人资料。有没有办法并排显示两个表，当选择配置文件表中的一行时，是否自动显示费率表中与该配置文件关联的费率名称？

Json片段：

＆＃13;

＆＃13;

[
  {
    "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"
    ]
  }
]

＆＃13;

＆＃13;

＆＃13;

Angular片段：

＆＃13;

＆＃13;

    $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!');
    });

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您想要的是selectedProfile对象，并显示该对象的费率

类似的东西：

// 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'">

在控制器中：

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

请注意，只有造型方面有很多不必要的ng-if。这会产生大量的棱角分明的手表，这些手表会因单独使用简单的css而导致性能问题