Question

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

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

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

字母过滤器将检索以字母范围开头的名称。例如，如果您选择第一个选项[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();
});

Answer 1

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

这是一个代码片段：

＆＃13;

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

＆＃13;

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

＆＃13;

PS：为了控制分页，我建议您不要手动操作，这会带来很多工作。我建议你在另一个问题中看到my answer，它就像一个＆＃34; mini＆＃34;如何使用angularUtils-pagination的教程。检查一下。

我希望它有所帮助。

使用角度为ng-repeat的过滤器分页

1 个答案: