Angularjs數據表在消失時呈現多次

我正在使用角度數據表，其中每次用戶選擇一個選項時都會生成表格。對於第一個輸入，數據表呈現成功，但在此之後，當用戶選擇onther選項時，數據表消失這個問題可以解決，如果我把數據表選項vm.dtOptions和vm.dtColumnDefs以外的函數。但我需要解決的問題，保持功能內的選項，因爲我的$scope.ln動態生成的函數內，我需要這個值來限制循環。那麼我怎樣才能實現我的目標，以便消失的多個表可以基於用戶輸入顯示？Angularjs數據表在消失時呈現多次

var app = angular.module('myApp',['datatables']); 
 
      app.controller('MyCtrl', function($scope,DTOptionsBuilder,DTColumnBuilder,DTColumnDefBuilder) { 
 
     
 
     $scope.department = [ 
 
       {value : "1", name : "sales"}, 
 
       {value : "2", name : "admin"}, 
 
       {value : "3", name : "other"} 
 
      ]; 
 
     
 
     $scope.dep=$scope.selected_dep; 
 
     
 
     $scope.depshow=function(){ 
 
     $scope.dep=$scope.selected_dep; 
 
     if($scope.dep==1) 
 
     { 
 
       $scope.list = [ 
 
        {"eid":"10","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}, 
 
        
 
        {"eid":"20","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}, 
 
        {"eid":"30","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"} 
 
       ]; 
 
       } 
 
       else if($scope.dep==2) 
 
       { 
 
       $scope.list = [ 
 
        {"eid":"40","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}, 
 
        
 
        {"eid":"50","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}, 
 
        {"eid":"60","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"} 
 
       ]; 
 
       } 
 
     if($scope.dep==3)  { 
 
       $scope.list = [ 
 
        {"eid":"70","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}, 
 
        
 
        {"eid":"80","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}, 
 
        {"eid":"0","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"} 
 
       ]; 
 
     } 
 
     
 
     $scope.vm = {}; 
 
     
 
      $scope.vm.dtOptions = DTOptionsBuilder.newOptions() 
 
        .withOption('order', [0, 'asc']); 
 
     
 
      $scope.ln=4; 
 
       $scope.vm.dtColumnDefs = [ 
 
      ]; 
 
      for(var i=1;i<$scope.ln;i++){ 
 
     
 
     $scope.vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i).notSortable()); 
 
      } 
 
     } 
 
       
 
      });

<html> 
 
     <head> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
      <script src="https://phpflow.com/demo/angular_datatable_demo/angular-datatables.min.js"></script> 
 
      <script src="https://phpflow.com/demo/angular_datatable_demo/jquery.dataTables.min.js"></script> 
 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
      <link rel="stylesheet" href="https://phpflow.com/demo/angular_datatable_demo/datatables.bootstrap.css"> 
 
     </head> 
 
     <div class="container"> 
 
     <div ng-app="myApp" ng-controller="MyCtrl"> 
 
Select <select ng-model="selected_dep" ng-change="depshow()" ng-options="item.value as item.name for item in department"> 
 

 
<option value="">select a department</option> 
 
</select> 
 
    {{selected_dep}} 
 
     <table class="table table-striped table-bordered" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs" datatable="ng"> 
 
      <thead> 
 
       <tr> 
 
     \t <th>Employee ID</th> 
 
     \t <th>dynamic clm1</th> 
 
     \t <th>dynamic clm2</th> 
 
     \t <th>dynamic clm3</th> 
 
      <th>sales</th> 
 

 
     </thead> 
 
      <tbody> 
 
      
 
      <tr ng-repeat="data in list"> 
 
       <td> {{ data.eid }} </td> 
 
       <td> {{ data.dyn1 }} </td> 
 
       <td> {{ data.dyn2 }} </td> 
 
       <td> {{ data.dyn3 }} </td> 
 
       
 
       <td> {{ data.sales }} </td> 
 
       </tr> 
 
     </tbody> 
 
     </table> 
 
     </div>

來源

2017-06-26 query

括號如果您運行的是從第一次 – geo

我收到沒有產生錯誤的代碼片段錯誤有一個選擇選項，你必須選擇一個選項來獲取表 – query

對不起，我放棄了。我閱讀了文檔，但仍然無法弄清楚。祝你好運。 – adam0101

這樣做的原因是，你沒有對

else if($scope.dep==2)

來源

2017-06-26 14:41:44 geo

感謝您檢測到的錯誤，但這不是我的問題的原因........ – query

Angularjs數據表在消失時呈現多次

回答

相關問題