AngularJS如何按数组中pageindex字段过滤实现数据展示

这事儿在AngularJS里其实很容易实现，用内置的filter过滤器或者自定义过滤函数都能搞定，我给你两种方案参考：

方案一：用AngularJS内置filter快速实现 #

这种方式适合简单的匹配场景（你的pageindex是唯一值，所以也能实现精确匹配），只需要给输入框绑定ng-model，然后在ng-repeat里添加过滤条件即可：

控制器代码 #

// 假设你的数组已经定义在$scope中
$scope.fieldsonpdf = [
  {fieldname:'firstname',pageindex:'1'},
  {fieldname:'lastname',pageindex:'2'}
];

HTML代码 #

<input type="text" id="pageindex" ng-model="pageIndexInput" placeholder="输入页码" /> 
<span class="fieldindex" ng-repeat="x in fieldsonpdf | filter: {pageindex: pageIndexInput}"> 
  {{x.fieldname}}
</span>

说明：输入框绑定pageIndexInput变量后，filter会自动匹配数组中pageindex字段与输入值一致的项——输入1显示firstname，输入2显示lastname，输入空则会展示所有项。

方案二：自定义过滤函数实现精确匹配 #

如果需要更严格的匹配（比如避免输入"1"时意外匹配到pageindex为"10"的项），可以自定义一个过滤函数：

控制器代码 #

$scope.fieldsonpdf = [
  {fieldname:'firstname',pageindex:'1'},
  {fieldname:'lastname',pageindex:'2'}
];

// 自定义过滤函数
$scope.filterByPageIndex = function(item) {
  // 输入为空时不显示任何内容，若想显示所有可把return改成true
  if (!$scope.pageIndexInput) return false;
  // 严格校验pageindex与输入值完全相等
  return item.pageindex === $scope.pageIndexInput;
};

HTML代码 #

<input type="text" id="pageindex" ng-model="pageIndexInput" placeholder="输入页码" /> 
<span class="fieldindex" ng-repeat="x in fieldsonpdf | filter: filterByPageIndex"> 
  {{x.fieldname}}
</span>

说明：这种方式会严格校验pageindex和输入值是否完全一致，避免模糊匹配带来的意外情况，同时还能灵活控制输入为空时的展示逻辑。

内容的提问来源于stack exchange，提问作者davidi sheleg