AngularJS + Datatables + Dropdownlist

Question

Я использую AngularJS для заполнения моего datatable. То, что я хочу знать, как я могу заполнить DataTable на основе DropDownList

Это мой DropDownList

<div> 
    Get Users with Role: 
    <select id="ddlRole" data-ng-model="selectedRole" data-ng-change="populateDataTable()" data-ng-options="v.name for (k,v) in roles"></select> 
    <input type="hidden" value="{{selectedRole}}" /> 
</div> 

Это мой угловой код

$scope.roles = [ 
    {name: 'XXX' }, 
    {name: 'YYY' } 
]; 
$scope.selectedRole = $scope.roles[0]; 

//onchange event 
$scope.populateDataTable = function() { 
    $scope.selectedRole = $scope.selectedRole.name; 
    RefreshDataTable(); //TODO 
}; 

Как я могу изменить это сделать ajax-вызов для восстановления данных, заполните данные, основанные на выпадающем списке, и сохраните значение выпадающего списка.

Я уверен, что мы можем сделать это с помощью JQuery, но я не хочу смешивать эти и напутать. Есть ли способ, которым я могу это сделать, используя AngularJS?

Answer 1

Вот простая таблица данных директива:

appModule.directive('dataTable', [function() { 
    return function (scope, element, attrs) { 

     // apply DataTable options, use defaults if none specified by user 
     var options = {}; 
     if (attrs.myTable.length > 0) { 
      options = scope.$eval(attrs.myTable); 
     } else { 
      options = { 
       "bStateSave": true, 
       "iCookieDuration": 2419200, /* 1 month */ 
       "bJQueryUI": true, 
       "bPaginate": false, 
       "bLengthChange": false, 
       "bFilter": false, 
       "bInfo": false, 
       "bDestroy": true 
      }; 
     } 

     // Tell the dataTables plugin what columns to use 
     // We can either derive them from the dom, or use setup from the controller   
     var explicitColumns = []; 
     element.find('th').each(function (index, elem) { 
      explicitColumns.push($(elem).text()); 
     }); 
     if (explicitColumns.length > 0) { 
      options["aoColumns"] = explicitColumns; 
     } else if (attrs.aoColumns) { 
      options["aoColumns"] = scope.$eval(attrs.aoColumns); 
     } 

     // aoColumnDefs is dataTables way of providing fine control over column config 
     if (attrs.aoColumnDefs) { 
      options["aoColumnDefs"] = scope.$eval(attrs.aoColumnDefs); 
     } 

     if (attrs.fnRowCallback) { 
      options["fnRowCallback"] = scope.$eval(attrs.fnRowCallback); 
     } 

     // apply the plugin 
     var dataTable = element.dataTable(options); 



     // watch for any changes to our data, rebuild the DataTable 
     scope.$watch(attrs.aaData, function (value) { 
      var val = value || null; 
      if (val) { 
       dataTable.fnClearTable(); 
       dataTable.fnAddData(scope.$eval(attrs.aaData)); 
      } 
     }); 

     if (attrs.useParentScope) { 
      scope.$parent.dataTable = dataTable; 
     } else { 
      scope.dataTable = dataTable; 
     } 
    }; 
}]); 

Затем инициализировать его в контроллере. Переопределите метод fnServerData, добавьте выбранное значение (выбранную роль) и данные фильтра на стороне сервера.

$scope.overrideOptions = { 
      "bStateSave": true, 
      "iDisplayLength": 8, 
      "bProcessing": false, 
      "bServerSide": true, 
      "sAjaxSource": 'Data/Get', 
      "bFilter": false, 
      "bInfo": true, 
      "bLengthChange": false, 
      "sServerMethod": 'POST',  , 
      "fnServerData": function(sUrl, aoData, fnCallback, oSettings) { 
       var data = { 
        dataTableRequest: aoData, 
        selectedDropDownValue: $scope.selectedRole 
       }; 

       $http.post(sUrl, data).success(function (json) { 
        if (json.sError) { 
         oSettings.oApi._fnLog(oSettings, 0, json.sError); 
        } 

        $(oSettings.oInstance).trigger('xhr', [oSettings, json]); 
        fnCallback(json); 
       }); 
      } 
    }; 

var columnDefs = [ 
         { 
          "mData": "id",        
          "bSortable": false, 
          "bSearchable": false,        
          "aTargets": ['tb-id'] 
         }, 
         { 
          "mData": "data", 
          "aTargets": ['tb-data']        
         } 
]; 

Обновить данные при выборе варианта.

$scope.populateDataTable = function() {   
    if ($scope.dataTable) { 
     $scope.dataTable.fnDraw(); 
    } 
    }; 

Html разметка:

<table class="display m-t10px" data-table="overrideOptions" ao-column-defs="columnDefs"> 
     <thead> 
      <tr> 
       <th class="tb-id"></th>   
       <th class="tb-data></th>    
      </tr> 
     </thead> 
     <tbody> 
     </tbody> 
</table> 

Answer 2

Надежда выше вашего кода находится в контроллере. Inject $ HTTP и сделать индивидуальный вызов $ HTTP GET или сообщению

$scope.populateDataTable = function() { 
    $scope.selectedRole = $scope.selectedRole.name; 
     $http.get('api/controller', function(result){ 
     //response from the service call in result 
     }); 
    };