按数组中的字段过滤 - angularJS

Question

我试图显示数组中的一些行，并按某个字段过滤它们。例如：我有数组“fieldindex”，数组中的字段是：字段名页面索引数组内容为：[{fieldname:'firstname',pageindex:'1'},{fieldname:'lastname',pageindex:'2'}]我有这个代码：<input type="text" id="pageindex" />    <span class="fieldindex" ng-repeat="x in fieldsonpdf">    {{x.fieldname}}</span>我希望跨度仅显示“pageindex”等于输入值的字段例如：如果输入的值为1，则跨度显示“firstname”，如果输入的值为 2，则范围显示“lastname”。感谢帮助者。

Answer 1

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

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

然后你可以使用pageindexas过滤器点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使用 强制该属性为数字+。