Question

我正在使用角度数据表，我每次用户选择一个选项时都会生成表。对于第一个输入，数据表成功渲染但在用户选择onther选项后，数据表从视图中消失。问题可能是解决了如果我将数据表选项vm.dtOptions和vm.dtColumnDefs放在函数外部。但是我需要解决问题，因为我的$scope.ln是在函数内部动态生成的，因此保留函数内的选项。我需要这个值来限制循环。所以我怎样才能实现我的目标，以便可以根据用户输入显示多个表而不是消失？

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>

Answer 1

原因是你在

上没有括号

else if($scope.dep==2)

Angularjs数据表在渲染多次时消失

1 个答案: