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调用，告诉我在输入文本字段时何时触发过滤器。现在我试图将角色作为选择而不是文本字段，所以我改变了我的代码：

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

角色（我想填充选择）是一个静态数组，里面有五个元素。我可以看到“角色”列上的选择，但是为空（不显示管理员，客户等）并且它不会触发过滤器。当我选择一个项目时，没有任何地方发生。我在这儿失踪了吗？

PS：我已经看过类似的问题，甚至在可用时尝试了他们的问题，但我发现问题他们要么使用选择的异步值（我不想这样做））或者整个数据是静态的，这也是我不想要的。任何帮助将不胜感激。

修改

我是如何开始工作的：

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

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

几个月前，当我遇到这个问题时，我偶然发现了一个傻瓜：

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

如何在async（服务器端）ngTable

1 个答案: