根據ng-table行單擊更改uib-tabset內容

Question

我是Angularjs的新手，也是Web編程的新手，但是我在這方面已經取得了一些進展。

因此，我有一個ng表，並且ng-click起作用，以便它更改所選行的顏色，但是我也希望選項卡的內容根據相同的單擊而改變。

到目前為止，我有：

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"}];

    });

因此，如果您看一下setClickedRow函數，我會在應有的地方加注解，以及我嘗試過的方法之一，但我似乎無法完全解決。

目標是只具有heading選項卡，該選項卡具有id或1，以便在names數組中設置任何信息。 因此，例如，如果用戶選擇了Mary Manson行，則我希望heading選項卡包含“ Alpha”的內容。

我有一個jsfiddle ，但實際上並沒有在其中使用tabset ，因為我也是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; ，但僅供參考），您可以簡單地說： 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>