Angular JS Datatables Zeilenklickereignis dynamisches AngularUI Tab hinzufügen

Ich wollte einen Browser wie Tabs machen, aber das Ereignis wird innerhalb eines eckigen Databilds ausgelöst (ich benutze dieses - angular-datatables). Ich habe bereits den Controller eingerichtet, um auf Klick pro Zeile zu hören, um eine dynamische Registerkarte hinzuzufügen. Aber leider fügt es die Registerkarte nicht hinzu. Ich habe das Array $scope.tabs geloggt und festgestellt, dass die Registerkarte hinzugefügt wurde, aber nicht auf der <uib-tabset>. Bitte beachten Sie den Screenshot unten;Angular JS Datatables Zeilenklickereignis dynamisches AngularUI Tab hinzufügen

Screenshot oben zeigt die Datentabelle, wenn ich das markierte Feld klicken (rot) es sollte eine Lasche nach „Dyanamic Titel 1“ Registerkarte hinzufügen und als aktiv (oder aktuell ausgewählte Registerkarte) eingestellt. Wie mache ich das, jedes Mal, wenn ich auf eine Zeile klicke, wird eine dynamische Registerkarte hinzugefügt?

Hier ist mein Controller für AngularJS

controller.js

app.controller('mainCtrl',['$scope', 
          'API_URL', 
          'DTOptionsBuilder', 
          'DTColumnBuilder', 
          '$resource', 
    function($scope, API_URL, DTOptionsBuilder, DTColumnBuilder, $resource){ 
     $scope.tabs = [ 
      { title:'Dynamic Title 1', content:'Dynamic content 1' }, 
     ]; 

     $scope.model = { 

     }; 

     var vm = $scope; 
     vm.dtOptions = DTOptionsBuilder.fromSource(API_URL+'employee') 
      .withPaginationType('full_numbers').withBootstrap() 
      .withOption('rowCallback', function(nRow, aData, iDisplayIndex, iDisplayIndexFull){ 
       $('td', nRow).unbind('click'); 
       $('td', nRow).bind('click', function() { 
        $scope.tabs.push({ 
         title: aData.empid, 
         content: 'Testing Content' 
        }); 
       }); 
      }); 

     vm.dtColumns = [ 
      DTColumnBuilder.newColumn('empid').withTitle('ID'), 
      DTColumnBuilder.newColumn('fname').withTitle('First name'), 
      DTColumnBuilder.newColumn('lname').withTitle('Last name'), 
      DTColumnBuilder.newColumn('position').withTitle('Position'), 
      DTColumnBuilder.newColumn('email').withTitle('Email'), 
     ]; 
}]);

Hier ist mein html

home.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
     <title>Test</title> 

     <!-- Bootstrap --> 
     <link href="[[ asset('/css/bootstrap.min.css') ]]" rel="stylesheet"> 

     <!-- Angular DataTables --> 
     <link href="[[ asset('/css/angular/angular-datatables.min.css') ]]" rel="stylesheet"> 
     <link href="[[ asset('/css/angular/datatables.bootstrap.min.css') ]]" rel="stylesheet"> 

     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
     <!--[if lt IE 9]> 
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
     <![endif]--> 
    </head> 
    <body ng-app="medrec"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <!-- header --> 
      </div> 
      <br/><br/><br/><br/><br/> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div ng-controller="mainCtrl"> 
         <uib-tabset active="active"> 
          <uib-tab index="0" heading="Static title"> 
           <table datatable="" dt-options="dtOptions" 
             dt-columns="dtColumns" class="table table-hover" 
             width="100%"> 
           </table> 
          </uib-tab> 
          <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled"> 
           {{tab.content}} 
          </uib-tab> 
         </uib-tabset> 
        </div> 
       </div> 
      </div> 
     </div> 

     @include('templates.footer') 
     <!-- jQuery --> 
     <script src="[[ asset('/js/jquery.2.2.3.min.js') ]]"></script> 

     <!-- jQuery DataTables --> 
     <script src="[[ asset('/js/jquery.dataTables.min.js') ]]"></script> 

     <!-- AngularJS Library --> 
     <script src="[[ asset('/app/lib/angular.min.js') ]]"></script> 
     <script src="[[ asset('/app/lib/angular-datatables.min.js') ]]"></script> 
     <script src="[[ asset('/app/lib/angular-animate.min.js') ]]"></script> 
     <script src="[[ asset('/app/lib/angular-route.min.js') ]]"></script> 
     <script src="[[ asset('/app/lib/angular-touch.min.js') ]]"></script> 
     <script src="[[ asset('/app/lib/angular-resource.min.js') ]]"></script> 
     <script src="[[ asset('/app/lib/angular-sanitize.min.js') ]]"></script> 
     <script src="[[ asset('/app/lib/angular.ui-bootstrap.min.js') ]]"></script> 


     <!-- Include all compiled plugins (below), or include individual files as needed --> 
     <script src="[[ asset('/js/bootstrap.min.js') ]]"></script> 
     <script src="[[ asset('/js/angular-datatables.bootstrap.min.js') ]]"></script> 

     <!-- AngularJS Modules --> 
     <script src="[[ asset('/app/app.js') ]]"></script> 

     <!-- AngularJS Config --> 
     <!-- script src="[[ asset('/app/config/route.js') ]]"></script --> 

     <!-- AngularJS Directives --> 
     <!-- script src="[[ asset('/app/controller/directive.js') ]]"></script --> 

     <!-- AngularJS Controllers --> 
     <script src="[[ asset('/app/controller/main-controller.js') ]]"></script> 

    </body> 
</html>

Quelle

2016-05-07 lemoncodes

Sie ein Er aktualisiert eine $scope Variable aus einem jQuery Callback. Ich glaube, dass Sie eine Aktualisierung der <uib-tab> ‚s zwingen kann $apply unter Verwendung:

$scope.tabs.push({ 
    title: aData.empid, 
    content: 'Testing Content' 
}); 
$scope.$apply();

Quelle

2016-05-07 14:18:18 davidkonrad

ohh ich sehe rechts .. dachte nicht daran, dass ein jQuery-Rückruf gewesen auf dem Winkel Aspekt so fokussiert von .. worden es .. übrigens .. wie wählt man automatisch den neu hinzugefügten Tab? benutze aktiv gesetzt, um aktuelle Registerkarte Index, aber es wird nicht tun – lemoncodes

@lemoncodes, haben Sie in Betracht gezogen, 'active: true' zu dem Literal Sie drücken auf' tabs'? '$ scope.tabs.push ({title: aData.empid, Inhalt: 'Testing Content', active: true});' Dies scheint der Weg zu sein, Sie haben 'active =" tab.active "'. Ich bin nicht so vertraut mit "Uib-Tab", mit Angularstrap selbst. – davidkonrad

ja, versucht, es zu benutzen, aber es wird nicht die neu hinzugefügte Registerkarte .. ja, dass was ich dachte auch, aber es scheint nicht folgt .. ich habe die angular-ui bootstrap docu gelesen, aber ich verstehe es wirklich nicht wie man eine Registerkarte wählt .. da auf dem Dokument, wenn Sie eine Registerkarte mit einem Knopf, neg-Klick-Teil vuldo wird nur einen Wert von active = – lemoncodes

Angular JS Datatables Zeilenklickereignis dynamisches AngularUI Tab hinzufügen

Antwort

Verwandte Themen