ng-tablo satırını kullanarak uib-tabset içeriğini değiştirin

Question

Angularjs ve web programlama döneminde yeniyim, ancak bunun üzerinde bazı ilerlemeler yaptım.

Yani, bir ng-table'ım var ve seçili satırın rengini değiştirecek şekilde tıklamaya çalışıyorum ama aynı zamanda bir sekmenin içeriğinin aynı tıklamaya göre değişmesini de istiyorum.

Ne var bugüne kadar: Eğer setClickedRow işlevi bakarsanız

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

    }); 

Yani, yorumlarınız nereye gittiğimi düşündüğüm yerlerin yanı sıra, denediğim şeylerden biri de oraya kadar gel.

Amaç, names dizisinde ayarlanmış olan her hangi bir bilgiye sahip olmak için, kimliği veya 1 olan heading sekmesini elde etmektir. Örneğin, kullanıcı Mary Manson satırını seçtiyse, heading sekmesinin "Alfa" içeriğini içermesini beklerdim.

jsfiddle'um var, ama aslında bu sekmeyi çalıştıramadım. B/c Ben de jsfiddle'a yeniyim .... ama belki de göstermeye yardımcı olacak.

Answer 1

İçeriğin ayarlanması gereken sekmenin dizinini biliyorsanız, $scope.tabs[someIndex].content = $scope.information;'u kullanabilirsiniz.

Değilse, ancak böyle .filter() kullanabilirsiniz (adı gibi) sekmesinin bir özelliğini biliyorum: (sizin yöntemine parametre olarak sekmesine geçebilir $scope.tabs.filter(function(t){ return t.name == 'heading'; })[0].content = $scope.information;

bu durumda hangi Yapabildiğiniz gibi görünmüyor, ancak referans olarak) sadece tab.content = $scope.information; deyin.

Answer 2

Soruyu anlamadım ancak ng-controller öğenizin <uib-tabset> öğesinin sarıldığını gözlemlemiştim. Bu nedenle öğesinin, tabs iletmeye çalıştığınız denetleyicinin kapsamı bile yoktur. Bunu yapmayı dene. Sorununuzu en azından kısmen çözebilirsiniz.

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