根据ng表行单击更改uib-tabset内容

Question

我对Angularjs和web编程都很陌生，但我在这方面已经取得了一些进展。

因此，我有一个ng表，并且我有ng单击工作，这样它就可以更改所选行的颜色，但我也希望根据相同的单击更改选项卡的内容。

到目前为止我所拥有的是：

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数组中设置任何信息。因此，例如，如果用户选择Manson行，我希望heading选项卡包含"Alpha“的内容。

我有一个小提琴，但我实际上并没有让表集在它中工作-- b/c --我刚开始使用too....but，也许它会帮助展示它。

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>