基于ng表行单击更改uib选项卡集内容

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

本文关键字:选项 uib ng 单击 基于      更新时间:2023-10-11

我是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函数,我有一些意见,我认为这应该去哪里,还有我尝试过的一件事,但我似乎无法完全做到。

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

我有一个jsfiddle,但我实际上并没有让tabset在其中工作b/c我也是jsfiddler的新手。。。。但也许展示它会有所帮助。

如果您知道需要设置其内容的选项卡的索引,则可以使用$scope.tabs[someIndex].content = $scope.information;

如果不是,但您知道选项卡的属性(如名称),则可以使用.filter(),如下所示:$scope.tabs.filter(function(t){ return t.name == 'heading'; })[0].content = $scope.information;

如果您可以将选项卡作为参数传递给您的方法(在这种情况下,它看起来不像您可以,但仅供参考),那么您可以简单地说tab.content = $scope.information;

我并没有真正理解这个问题,但我观察到您的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>