0

I am using angular data table where i am generating table every time user selects an option.For the first input the data table render successfully but after that when user select onther option the data table disappear from the view.The problem can be solved if i place the data table options vm.dtOptions and vm.dtColumnDefs outside the function.But i need to solve the issue keeping the options inside the function as my $scope.ln is dynamically generated inside the function and i need this value to limit the loop.So how can i achieve my goal so that instead of disappearing multiple table can be showed based on user input? 

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>
          <th>Employee ID</th>
         <th>dynamic clm1</th>
         <th>dynamic clm2</th>
         <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>
adam0101
  • 29,096
  • 21
  • 96
  • 174
query
  • 531
  • 3
  • 7
  • 30
  • If you run the code snippet an error is generated from the first time – geo Jun 26 '17 at 14:32
  • i am getting no error there is a select option and you have to select an option to get the table – query Jun 26 '17 at 14:34
  • Sorry, I give up. I read through the documentation, but still couldn't figure it out. Good luck to you. – adam0101 Jun 27 '17 at 21:29
  • I fixed your example though so it runs on here. Hopefully someone else will be intrigued and troubleshoot it some more for you. – adam0101 Jun 27 '17 at 21:35
  • ok i am excepting the ans and will be happy if you can show some light on the issue posted here https://stackoverflow.com/questions/44775899/disable-column-sorting-not-working-in-angularjs-datatable – query Jun 27 '17 at 21:46

1 Answers1

0

The reason for this is that you dont have brackets on the 

else if($scope.dep==2)
geo
  • 2,283
  • 5
  • 28
  • 46