Javascript 使用ng repeat（角度重复）的过滤器分页

我正在尝试使用过滤器进行分页

有一份名单，上面有姓名和国家

我试图按国家和字母范围过滤它们，然后按数字生成分页。我真的被它缠住了。任何帮助都会非常感激

---

字母过滤器将检索以字母范围开头的名称。例如，如果您选择第一个选项，[A-M]将返回其名称在该字母范围内开始的人

这是我的密码。html在那边。谢谢

---

我创建了一个自定义过滤器来过滤您想要的范围

下面是一个代码片段：

var-app=angular.module'app'，['angular.filter']； 应用程序控制器'mainCtrl'，函数$scope{ $scope.currentPage=1； $scope.pageSize=3； $scope.pages=[]； $scope.AlphabethicalRange=[ { 从A开始， 致：M }, { 从：N开始， 致:Z } ]; $scope.Countries=[ { 姓名：美国 }, { 姓名：日本 }, { 姓名：法国 }, { 姓名：加拿大 }, { 姓名：中国 } ]; $scope.People=[ { Id:1， 姓名:威尔,， 国家：美国 }, { Id:2， 姓名：Ed， 国家：美国 }, { Id:3， 姓名：彼得， 国家：中国 }, { Id:4， 姓名：约翰， 国家：日本 }, { Id:5， 姓名：亚历克斯， 国家：法国 }, { Id:6， 姓名：吉姆， 国家：法国 }, { Id:7， 姓名：奥斯汀， 国家：意大利 }, { Id:8， 姓名:男,， 国家：法国 }, { Id:9， 姓名：Zike， 国家：加拿大 } ]; $scope.numberpage=Math.ceil$scope.People.length/$scope.pageSize； $scope.init=函数{ 对于i=1；i<$scope.numberpage；i++{ $scope.pages.pushi； } }; $scope.init； }; 应用过滤器'rangeAlphaFilter'，函数{ 返回功能项，搜索{ 如果！搜索| |搜索=='-'{ 退货项目； } return items.filterfunctionelement{ 返回新的RegExp'['+search.replace//g，+']'，i.testelement.Name[0]； }; } }; 国家过滤器 -选择一个国家- 字母过滤器 -选择一个范围- 页码

---

我创建了一个自定义过滤器来过滤您想要的范围

下面是一个代码片段：

var-app=angular.module'app'，['angular.filter']； 应用程序控制器'mainCtrl'，函数$scope{ $scope.currentPage=1； $scope.pageSize=3； $scope.pages=[]； $scope.AlphabethicalRange=[ { 从A开始， 致：M }, { 从：N开始， 致:Z } ]; $scope.Countries=[ { 姓名：美国 }, { 姓名：日本 }, { 姓名：法国 }, { 姓名：加拿大 }, { 姓名：中国 } ]; $scope.People=[ { Id:1， 姓名:威尔,， 国家：美国 }, { Id:2， 姓名：Ed， 国家：美国 }, { Id:3， 姓名：彼得， 国家：中国 }, { Id:4， 姓名：约翰， 国家：日本 }, { Id:5， 姓名：亚历克斯， 国家：法国 }, { Id:6， 姓名：吉姆， 国家：法国 }, { Id:7， 姓名：奥斯汀， 国家：意大利 }, { Id:8， 姓名:男,， 国家：法国 }, { Id:9， 姓名：Zike， 国家：加拿大 } ]; $scope.numberpage=Math.ceil$scope.People.length/$scope.pageSize； $scope.init=函数{ 对于i=1；i<$scope.numberpage；i++{ $scope.pages.pushi； } }; $scope.init； }; 应用过滤器'rangeAlphaFilter'，函数{ 返回功能项，搜索{ 如果！搜索| |搜索=='-'{ 退货项目； } return items.filterfunctionelement{ 返回新的RegExp'['+search.replace//g，+']'，i.testelement.Name[0]； }; } }; 国家过滤器 -选择一个国家- 字母过滤器 -选择一个范围- 页码

---

你们能解释一下你们想用这个字母过滤器做什么吗？字母过滤器将检索以字母范围开头的名字。例如，如果您选择第一个选项[A-M]将返回其姓名在该字母范围内的人，是否由角度过滤器提供？我不这样认为，我认为我需要为此创建一个自定义过滤器。您是否使用orderBy尝试过此操作？这可能无助于筛选[A-M]中的名称，但会影响wi

---

I’我按字母顺序排列你们能解释一下你们想用这个按字母顺序排列的过滤器做什么吗？按字母顺序排列的过滤器将检索以字母范围开头的名称。例如，如果您选择第一个选项[A-M]将返回其姓名在该字母范围内的人，是否由角度过滤器提供？我不这样认为，我认为我需要为此创建一个自定义过滤器。您是否使用orderBy尝试过此操作？这可能无助于在[A-M]中筛选名称，但会按字母顺序排列。您可以解释此部分返回新的RegExp'['+search.replace//g，+']'.testelement.name[0]；它是如何得到范围的起始值和结束值的？这是我脑海中疯狂的想法。由于ng模型是，例如：A-M，我考虑清除空白并使用自己的ng模型创建一个Regexp，然后只测试字母的范围是否与person的第一个字母匹配。return functionitems，search如何在items中获取列表和在search中获取A-Z？附言：我是新手。想知道工作项与人的关系在这种情况下，搜索与参数有关。是的，我知道。但我不明白的是，angular是如何得到这些值的。由于没有传递任何参数。您能否解释此部分返回新的RegExp'['+search.replace//g，+']'.testelement.Name[0]；它是如何得到范围的起始值和结束值的？这是我脑海中疯狂的想法。由于ng模型是，例如：A-M，我考虑清除空白并使用自己的ng模型创建一个Regexp，然后只测试字母的范围是否与person的第一个字母匹配。return functionitems，search如何在items中获取列表和在search中获取A-Z？附言：我是新手。想知道工作项与人的关系在这种情况下，搜索与参数有关。是的，我知道。但我不明白的是，angular是如何得到这些值的。因为没有传递任何参数。

angular.module('app',['angular.filter'])
.controller('MainController', function($scope) { 

$scope.selectedCountry = '';
$scope.currentPage = 1;
$scope.pageSize = 3;
$scope.pages = [];

//This should store {StartFrom and To from selected Range}
$scope.selectedRange = '';

$scope.AlphabethicalRange = [
  {StartFrom: 'A', To: 'M'},
  {StartFrom: 'N', To: 'Z'}
];

$scope.Countries = [
{ Name : 'USA'},
{ Name : 'Japan'},
{ Name : 'France'},
{ Name : 'Canada'},
{ Name : 'China'},
];

$scope.People = [
{ Id: 1, Name: 'Will', Country: 'USA'},
{ Id: 2, Name: 'Ed', Country: 'USA' },
{ Id: 3, Name: 'Peter', Country: 'China'},
{ Id: 4, Name: 'John', Country: 'Japan'},
{ Id: 5, Name: 'Alex', Country: 'France'},
{ Id: 6, Name: 'Jim', Country: 'France'},
{ Id: 7, Name: 'Austin', Country: 'Italy'},
{ Id: 8, Name: 'Men', Country: 'France'},
{ Id: 9, Name: 'Zike', Country: 'Canada'},
];

$scope.numberPages = Math.ceil($scope.People.length / $scope.pageSize);

$scope.init = function () {
 for (i = 1; i < $scope.numberPages; i++) {
      $scope.pages.push(i);
   }

    };

    $scope.init();
});