根据 ng-table 行点击更改 uib-tabset 内容

Question

我是 Angularjs 和网络编程阶段的新手，但我在这方面取得了一些进展。

所以，我有一个 ng-table 并且我有 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，但我实际上并没有让标签集在其中工作 b/c 我也是 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>

根据 ng-table 行点击更改 uib-tabset 内容

Change uib-tabset content based on ng-table row click

html

javascript

tabs

angularjs

ngtable