在角度中使用 ng-repeat 使用过滤器进行分页答案

【问题标题】：Pagination with filters using ng-repeat in angular在角度中使用 ng-repeat 使用过滤器进行分页
【发布时间】：2016-11-06 19:06:03
【问题描述】：

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

有一个包含名称和国家/地区的列表。

我正在尝试按国家和字母范围过滤它们，然后按数字生成分页。我真的很坚持。任何帮助将不胜感激

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

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

http://jsbin.com/cifowatuzu/edit?html,js,output

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

【问题讨论】：

你能解释一下你想用这个字母过滤器做什么吗？
字母过滤器将检索以字母范围开头的名称。例如，如果您选择第一个选项 [A - M] 将返回其姓名在该字母范围内开始的人
好的，是angular-filter提供的吗？
我不这么认为，我想我需要为此创建一个自定义过滤器
你用 orderBy 试过了吗？ <ul ng-repeat="person in People | orderBy:'Name'"> 这可能无助于过滤 [A-M] 中的名称，但会按字母顺序排列它们

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

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

这是一个 sn-p 工作：

var app = angular.module('app', ['angular.filter']);

app.controller('mainCtrl', function ($scope) {
  $scope.currentPage = 1;
  $scope.pageSize = 3;
  $scope.pages = [];

  $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();
});

app.filter('rangeAlphaFilter', function() {
  return function(items, search) {
    if (!search || search == ' - ') {
      return items;
    }    
    return items.filter(function(element) {
      return new RegExp('[' + search.replace(/ /g, '') + ']', 'i').test(element.Name[0]);
    });
  }
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <div>
    <span>Country Filter</span>
    <select name="countriesSelect" ng-options="c as c.Name for c in Countries" ng-model="selectedCountry">
      <option value="">-- Select a country --</option>
    </select>
    <br>
    <span>Alphabetical Filter</span>
    <select name="AlphabeticalSelect" ng-options="a as a.StartFrom +' - '+ a.To for a in AlphabethicalRange" ng-model="selectedRange">
      <option value="">-- Select a range --</option>
    </select>
    <ul>
      <li ng-repeat="person in People | filter: { Country: selectedCountry.Name } | rangeAlphaFilter: selectedRange.StartFrom +' - '+ selectedRange.To" ng-bind="person.Name"></li>
    </ul>
    <span>Pagination Numbers</span>
    <a href="#" ng-repeat="page in pages">{{page}}</a>
  </div>
</body>
</html>

PS：为了控制分页，我非常不建议你手动做，它会做很多工作。我建议您在另一个问题中查看my answer，它就像一个关于如何使用angularUtils-pagination 的“迷你”教程。检查一下。

希望对你有帮助。

【讨论】：

你能解释一下这部分return new RegExp('[' + search.replace(/ /g, '') + ']').test(element.Name[0]);它是如何获取范围开始和结束值的
我想到了一些疯狂的事情。由于ng-model 是，例如：“A - M”，我想清除空格并使用自己的ng-model 创建一个Regexp，然后测试该字母范围是否与第一个字母匹配的人。
return function(items, search) 这如何获得项目列表和搜索中的 A-Z？ PS： 我是 Angular 新手。想知道事情是如何运作的
items 与People 相关，search 与参数相关。
是的，我知道。但我没有得到的是角度如何获得这些值。因为没有传递参数。