비동기 (서버 측)에서 정적 값이있는 선택 필터를 사용하는 방법 ngTable

Question

ngTable 0.3.3을 사용 중이며 비동기 호출을 수행하여 테이블을 채 웁니다 (서버 측에서도 페이지 매김). 예상대로

<table ng-table="tableParams" show-filter="true" class="table table-custom"> 
     <tr ng-repeat="user in $data"> 
     <td data-title="'Name'"> 
      {{user.first_name}} {{user.last_name}} 
     </td> 
     <td data-title="'Role'" sortable="'role'" filter="{ 'role': 'text' }"> 
      {{user._role}} 
     </td> 
     <td data-title="'Email'" sortable="'email'" filter="{ 'email': 'text' }"> 
      {{user.email}} 
     </td> 
     <td data-title="'Created date'"> 
      {{user.created_at | date: 'dd MMM yyyy'}} 
     </td> 
     <td data-title="'Edit'"> 
      <a ui-sref="app.users.edit({userId: user.id})">Edit</a> 
     </td> 
     <td data-title="'Edit'"> 
      <a ng-click="deleteUser(user.id)">Delete</a> 
     </td> 
     </tr> 
    </table> 

그리고 필터링 및 페이지 매김 두 작품이 HTML과

var data = []; 

$scope.tableParams = new ngTableParams({ 
    page: 1, 
    count: 10 
}, { 
    getData: function($defer, params) { 
    // getData gets called when you click on a different page in the pagination links. 
    // get the page number and size from params.$params 
    var pageNumber = params.$params.page; 
    var pageSize = params.$params.count; 
    // set up the query parameters as expected by your server 
    var mm = params.filter(); 
    var queryParams = {"page_size":pageSize, "page_number":pageNumber, "sorting": params.sorting(), role: mm.role, id: mm.id, email: mm.email}; 
    $log.log(mm.role); 

    // $log.log(mm.role, mm.email); 

    User.getCount().then(function (total) { 
     User.query(queryParams).then(function (result) { 
     params.total(total); 
     $defer.resolve(result); 
     }); 
    }); 
    } 
}); 

: 여기에 내 코드입니다. 내가 $log 전화가있어서 텍스트 필드에 입력하는 동안 필터가 작동하고 있음을 알 수 있습니다. 내가 원하는 것을 (

<table ng-table="tableParams" show-filter="true" class="table table-custom"> 
      <tr ng-repeat="user in $data"> 
      <td data-title="'Name'"> 
       {{user.first_name}} {{user.last_name}} 
      </td> 
      <td data-title="'Role'" sortable="'role'" filter="{ 'role': 'text' }"> 
       {{user._role}} 
      </td> 
      <td data-title="'Role1'" filter="{role: 'select'}" filter-data="roles($column)">{{user._role}}</td> 
      <td data-title="'Email'" sortable="'email'" filter="{ 'email': 'text' }"> 
       {{user.email}} 
      </td> 
      <td data-title="'Created date'"> 
       {{user.created_at | date: 'dd MMM yyyy'}} 
      </td> 
      <td data-title="'Edit'"> 
       <a ui-sref="app.users.edit({userId: user.id})">Edit</a> 
      </td> 
      <td data-title="'Edit'"> 
       <a ng-click="deleteUser(user.id)">Delete</a> 
      </td> 
      </tr> 
     </table> 

역할 : 지금은 선택이 아닌 텍스트 필드와 같은 역할을 얻으려고, 그래서 나는 그렇게처럼 내 코드를 변경 :

$scope.roles = function (column) { 
    var def = $q.defer(); 
    var docType = [{role: 'admin'}, {role: 'customer'}, {role: 'singer'}, {role: 'voiceArtist'}]; 

    def.resolve(docType); 
    return def; 
}; 

var data = []; 

$scope.tableParams = new ngTableParams({ 
    page: 1, 
    count: 10 
}, { 
    getData: function($defer, params) { 
    // getData gets called when you click on a different page in the pagination links. 
    // get the page number and size from params.$params 
    var pageNumber = params.$params.page; 
    var pageSize = params.$params.count; 
    // set up the query parameters as expected by your server 
    var mm = params.filter(); 
    var queryParams = {"page_size":pageSize, "page_number":pageNumber, "sorting": params.sorting(), role: mm.role, id: mm.id, email: mm.email}; 
    $log.log(mm.role); 

    // $log.log(mm.role, mm.email); 

    User.getCount().then(function (total) { 
     User.query(queryParams).then(function (result) { 
     params.total(total); 
     $defer.resolve(result); 
     }); 
    }); 
    } 
}); 

그리고이 HTML select from을 채우는)은 5 개의 요소가 포함 된 정적 배열입니다. 역할 열에 선택 항목이 표시되지만 비어 있습니다 (관리자, 고객 등은 표시되지 않음). 그러면 필터가 트리거되지 않습니다. 항목을 선택하면 아무 것도 발생하지 않습니다. 내가 여기서 누락 된거야?

추신 : 나는 비슷한 질문을 보았고 사용 가능할 때도 시험해 보았지만 선택 사항 (전체 또는 일부)에 대해 비동기 값을 사용하는 것으로 나타났습니다. 정적인데, 나는 다시 그러고 싶지 않습니다. 어떤 도움이라도 대단히 감사 할 것입니다.

편집

나는 일을 가지고 방법 :

내 JS 코드 :

$scope.roles = function (column) { 
    var def = $q.defer(); 
    var docType = [{id: 'admin', title: 'Admin'}, {id: 'customer', title: 'Customer'}, {id: 'singer', title: 'Singer'}, {id: 'voiceArtist', title: 'Voice Artist'}]; 
    def.resolve(docType); 
    return def; 
}; 

var data = []; 

$scope.deleteUser = function (id) { 
    User.get(id).then(function (result) { 
    $scope.tmpUser = result; 
    $scope.tmpUser.remove().then(function (result) { 
     if (result) { 
     $scope.showAlert('User deleted successfully.', 'success'); 
     var n = true; 
     angular.forEach(data, function (v, k) { 
      if ($scope.tmpUser.id === v.id) { 
      if (n) { 
       data.splice(k, 1); 
       $scope.tableParams.reload(); 
       n = false; 
      } 
      } 
     }); 
     } 
    }); 
    }); 
}; 

$scope.tableParams = new ngTableParams({ 
    page: 1, 
    count: 10 
}, { 
    getData: function($defer, params) { 
    // getData gets called when you click on a different page in the pagination links. 
    // get the page number and size from params.$params 
    var pageNumber = params.$params.page; 
    var pageSize = params.$params.count; 
    // set up the query parameters as expected by your server 
    var mm = params.filter(); 
    var queryParams = {"page_size":pageSize, "page_number":pageNumber, "sorting": params.sorting(), role: mm.role, id: mm.id, email: mm.email}; 

    User.getCount().then(function (total) { 
     User.query(queryParams).then(function (result) { 
     params.total(total); 
     $defer.resolve(result); 
     }); 
    }); 
    } 
}); 

그 배열이 [{id:'someId', title: 'SomeTitle'}, {...}]

의 형식으로 필수 통과 점에 유의하는 것이 중요합니다

Answer 1

당신이 해결하겠다는 약속을 기다리지 않고 있기 때문에 귀하의 선택은 채워지지 않습니다. 의 짧은 버전입니다

function getData() { 
    return $q.when([{role: 'admin'},...]); 
} 
var promise = getData(); 

:

plnkr.co/edit/XJo9rp?p=preview

가 그런 일을 시도 여기

내가 몇 달 전에이 문제를 직면했을 때에 비틀 거린 plunker의

function getData() { 
    var def = $q.defer(); 
    var docType = [{role: 'admin'},...]; 
    def.resolve(docType); 
    return def; 
} 
var promise = getData(); 

범위 기능 :

$scope.roles = function(column) { 
    var select = promise.then(function(results) { 
     return results; 
    }) 
    return select; 
};