基于ng表行单击更改uibtabset内容。

I'm new to Angularjs, and web programming period, but I've made some progress on this.

我是Angularjs和web编程的新成员，但我在这方面已经取得了一些进展。

So, I have an ng-table and I have ng-click working so that it changes the color of the row that is selected, but I also want the content of a tab to change based on the same click.

因此，我有一个ng表，我有ng-click工作，这样它就会改变被选中的行的颜色，但是我也想要一个选项卡的内容在相同的点击基础上改变。

What I have so far:

到目前为止我所拥有的:

index.html

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

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

    });

So, if you look at the setClickedRow function I have comments where I think this should go, as well as one of the things I tried, but I can't seem to get all the way there.

所以，如果你看setClickedRow函数，我有评论，我认为这应该去，还有我尝试过的一件事，但我似乎无法做到这一点。

The goal is to just have the heading tab, which has the id or 1, to have whatever information is set to in the names array. So, for example, if the user selected the Mary Manson row, I would expect the heading tab to contain the content of "Alpha".

我们的目标是让标题选项卡，它有id或1，以便在名称数组中设置任何信息。因此，例如，如果用户选择了Mary Manson row，我希望标题选项卡包含“Alpha”的内容。

I have a jsfiddle, but I didn't actually get the tabset working in it b/c I'm new to jsfiddle too....but maybe it will help to show it.

我jsfiddle,但实际上我没有得到tabset工作的b / c我也是新jsfiddle ....但也许它会有助于展示它。

2 个解决方案

#1

If you know the index of the tab you need to set the content of, you can use $scope.tabs[someIndex].content = $scope.information;.

如果您知道需要设置内容的选项卡的索引，您可以使用$scope.tab [someIndex]。= $ scope.information;内容。

If not, but you know a property of the tab (like the name) you can use .filter() like this: $scope.tabs.filter(function(t){ return t.name == 'heading'; })[0].content = $scope.information;

如果没有，但是您知道选项卡的属性(如名称)，您可以使用.filter(): $scope.tabs.filter(函数(t){return .name == 'heading';})[0]。内容= $ scope.information;

If you can pass the tab in as a parameter to your method (which in this case it doesn't look like you can, but for reference) you can simply say tab.content = $scope.information;.

如果您可以将选项卡作为参数传递给您的方法(在本例中它看起来不像您可以，但是作为参考)，您可以简单地说tab。= $ scope.information;内容。

#2

I didn't really understand the question but I observed that your ng-controller element is not wrapping the <uib-tabset> element. So the <uib-tabset> element doesn't even have the scope of the controller from which you are trying to pass the tabs. Try doing this. Might just solve your issue at least partially.

我并没有真正理解这个问题，但是我注意到您的ng-controller元素并没有包装元素。因此，< uibt -tabset>元素甚至没有您试图传递选项卡的控制器的范围。试着这样做。可能只是部分地解决你的问题。

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

#1