按数组中的字段进行过滤-angularJS

Question

im试图在数组中显示一些行，并通过一些字段对其进行筛选。

例如：

我有数组"fieldindex"，阵列中的字段为：

1. 字段名
2. 页面索引

并且数组内容为：

[{fieldname:'firstname',pageindex:'1'},{fieldname:'lastname',pageindex:'2'}]

我有这个代码：

<input type="text" id="pageindex" />
<span class="fieldindex" ng-repeat="x in fieldsonpdf">
{{x.fieldname}}</span>

我希望跨度只显示它们的"页面索引"等于输入值的字段

例如：如果输入值为1，则量程显示"名字"，

如果输入值为2，则span显示"lastname"。

谢谢你的帮助。

Answer 1

您可以将ng-model添加到输入中，如

<input type="text" id="pageindex" ng-model="pageindex"/>

然后你可以使用pageindex作为ng-repeat的过滤器，比如

<span class="fieldindex" ng-repeat="x in fieldsonpdf | filter:pageindex">

工作代码段：

angular.module('test', [])
.controller('test', ['$scope', function ($scope) {

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

$scope.pageindex = '1';

}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="test" ng-controller="test">
<input type="text" id="pageindex" ng-model="pageindex"/>
<span class="fieldindex" ng-repeat="x in fieldsonpdf | filter:pageindex">
{{x.fieldname}}</span>
</div>

Answer 2

让我们考虑一下您已经从输入中获得了值。您可以使用函数filter将所有与您的条件匹配的对象带到一起，或者只使用find来获得第一个匹配，最好的方法是将此代码添加到您的控制器和模板的访问中，使用您的示例：

const list = [{fieldname:'firstname',pageindex:'1'},{fieldname:'lastname',pageindex:'2'}];
const getField = (value) => { return list.filter(item => +item.pageindex === value)}

然后你只需要从你的模板调用：

getField(2)

请注意，我使用+强制属性item.pageindex为数字。