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函数，我认为这应该是我应该去的地方，以及我尝试过的其中一件事，但我似乎无法一直到那里。< / p>

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

我有一个jsfiddle，但我实际上并没有让tabset在其中工作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行单击

2 个答案: