2

我试图在数组中显示一些行，并按某些字段过滤它们。

例如：

我有数组“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>

我希望跨度只显示它们的“pageindex”等于输入值的字段

例如：如果输入的值为1，则span显示“firstname”，

如果输入的值为 2，则跨度显示“姓氏”。

感谢帮手。

4

2 回答 2

2

您可以添加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>

于 2020-04-19T10:38:12.607 回答
1

让我们考虑一下您已经从输入中获得了价值。您可以使用该函数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使用+.

于 2020-04-19T10:35:21.823 回答