如何在异步（服务器端）ngTable 上使用具有静态值的 select 过滤器

Question

我正在使用 ngTable 0.3.3 并进行异步调用以填充 table（分页也在服务器端完成）。这是我的代码：

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:

    <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>

并且过滤和分页都按预期工作。您可以看到我有一个 $log 调用，它告诉我在文本字段中键入内容时过滤器何时被触发。现在我试图将角色作为 select 而不是文本字段，所以我像这样更改了我的代码：

$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：

<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>

角色（我想从中填充 select）是一个包含五个元素的静态数组。我可以在角色列上看到 select，但它是空的（不显示管理员、客户等）并且它不会触发过滤器。当我 select 一个项目时，任何地方都没有任何反应。我在这里错过了什么？

PS：我见过类似的问题，甚至在可用时尝试过他们的 plunker，但我发现他们的问题要么使用 select 的异步值（我不知道不想）或者整个数据是静态的，这又是我不想的。任何帮助将不胜感激。

编辑

我是如何让它工作的：

我的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

您的 select 未填充，因为您没有等待承诺解决。

这是我几个月前遇到这个问题时偶然发现的一个 plunker：

plnkr.co/edit/XJo9rp?p=preview

尝试这样的事情：

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

哪个是以下的简称：

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;
};

如何在异步（服务器端）ngTable 上使用具有静态值的 select 过滤器

How to use select filter with static values on async (server-side) ngTable

angularjs

ngtable