ng-table行のクリックに基づいてuib-tabsetの内容を変更します。

Question

AngularjsとWebプログラミングの期間は初めてですが、これについていくつか進歩しました。

ng-tableがあり、選択した行の色が変更されるようにng-clickが働いていますが、同じクリックに基づいてタブの内容を変更する必要があります。

私がこれまで持っている：あなたはsetClickedRow機能を見れば

index.htmlを

<style> 
    .selected { 
     background-color:black; 
     color:white; 
     font-weight:bold; 
    } 
</style> 

<div ng-app="app" ng-controller="ctrl"> 

    <table ng-table="tableParams" class="table table-bordered "> 
     <tr ng-repeat="user in $data" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index, user.information)"> 
      <td data-title="'First Name'">{{user.firstName}}</td> 
       <td data-title="'Last Name'">{{user.lastName}}</td> 
      </tr> 
    </table> 


    <uib-tabset type="pills"> 
     <uib-tab ng-repeat="tab in tabs" 
       heading="{{tab.name}}" 
       active=tab.active> 
       {{tab.content}} 

     </uib-tab> 
    </uib-tabset> 
</div> 

myStuff.js

angular.module('app', ['ngTable']) 
    .controller('ctrl', function($scope, NgTableParams) { 
     $scope.names = [{"firstName": "John", "lastName": "Doe", "information": "Alpha"}, 
             { "firstName": "Mary", "lastName": "Manson", "information": "Bravo"}, 
             {"firstName": "Bob", "lastName": "Smith", "information": "Charlie"}]; 

     $scope.tableParams = new NgTableParams({ 
       count: 20 
      }, { 
      data: $scope.names 
     }); 

     $scope.setClickedRow = function(index, information){ 
      $scope.selectedRow = index; 
      $scope.information = information; 

      //now I want to set the tab content to the value of information, my first guess was this below, that doesn't work. 
      //$scope.tabs.content = $scope.information; 
    } 

    $scope.tabs = [{id: 1, name: "heading", active:true, content: "no user selected."}, 
        {id: 2, name: "heading2", active:false, content: "static content"}]; 

    }); 

だから、私はコメントを持っていますどこに行ってもいいと思っていましたが、私が試したことの1つと同様ですが、そこまで行きましょう。

headingのID番号または1のタブには、namesの配列に設定されている情報が含まれています。したがって、たとえば、ユーザーがMary Manson行を選択した場合、headingタブに「Alpha」の内容が含まれると考えられます。

私はjsfiddleを持っていますが、実際にはタブセットが動作していませんでした。私はjsfiddleも新しくなっていますが、おそらくそれを見せてくれるでしょう。

Answer 1

コンテンツの設定が必要なタブのインデックスがわかっている場合は、$scope.tabs[someIndex].content = $scope.information;を使用できます。

ていない場合は、しかし、あなたが（名前のような）タブのプロパティを知っているあなたは、このよう.filter()を使用することができます：あなたはあなたのメソッドのパラメータとしてでタブを渡すことができる場合$scope.tabs.filter(function(t){ return t.name == 'heading'; })[0].content = $scope.information;

（それはこの場合、それはあなたができるように見えませんが、参照のために）あなたは単にtab.content = $scope.information;と言うことができます。

Answer 2

私はこの質問を本当に理解できませんでしたが、ng-controller要素が<uib-tabset>要素をラップしていないことがわかりました。したがって、<uib-tabset>要素には、tabsを渡そうとしているコントローラのスコープも含まれていません。これを試してください。少なくとも部分的にあなたの問題を解決するだけかもしれません。

<div ng-app="app" ng-controller="ctrl"> 
    <table ng-table="tableParams" class="table table-bordered "> 
     <tr ng-repeat="user in $data" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index, user.information)"> 
      <td data-title="'First Name'">{{user.firstName}}</td> 
      <td data-title="'Last Name'">{{user.lastName}}</td> 
     </tr> 
    </table> 

    <uib-tabset type="pills"> 
     <uib-tab ng-repeat="tab in tabs" 
     heading="{{tab.name}}" 
     active=tab.active> 
     {{tab.content}} 
     </uib-tab> 
    </uib-tabset> 
</div>