angularjs - 如何在异步(服务器端)ngTable 上使用具有静态值的选择过滤器

Question

我正在使用 ngTable 0.3.3 并执行异步调用来填充表格(分页也在服务器端完成)。这是我的代码:

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 调用，它告诉我在文本字段中键入内容时过滤器何时被触发。现在我试图让 Angular 色成为选择而不是文本字段，所以我像这样更改了我的代码:

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

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

PS:我见过类似的问题，甚至在可用时尝试过他们的 plunker，但我发现他们的问题要么使用异步值进行选择(我不想这样做)，要么整个数据是静态的，这又是我不想的。任何帮助将不胜感激。

编辑

我是如何让它工作的:

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

您的选择未被填充，因为您没有等待解决 promise 。

这是我几个月前遇到这个问题时偶然发现的一个 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;
};