角度过滤器恰好在对象键上

 哥只是个传说 发布于 2023-02-13 18:33

我有一个像这样的小角度应用程序:

HTML


  
{{ user.username }}, {{ user.id }}

app.js

function Ctrl($scope) {
  $scope.users = [
    {"id":1,"username":"simon",},
    {"id":8,"username":"betty",},
    {"id":14,"username":"archie",},
    {"id":3,"username":"jumbo1"},
  ]
}

产量

simon, 1
archie, 14
jumbo1, 3

我想要做的是仅在id字段上过滤过滤器参数AND过滤器的完全匹配.

基本上,我希望输出为:

产量

simon, 1

我正在使用Angular 1.2.

2 个回答
  • 基于 https://docs.angularjs.org/api/ng/filter/filter

    过滤模板:

    <tr ng-repeat="friendObj in friends | filter:id:true">
        <td>{{friendObj.name}}</td>
        <td>{{friendObj.phone}}</td>
    </tr>
    

    在Controller上过滤(使用$ param)

    $scope.friendObj = $filter('filter')(data.friends, { id: parseInt($stateParams.friendId) }, true)[0];
    

    2023-02-13 18:36 回答
  • 在Angular 1.1.3或更高版本中,您可以使用以下内容:

    <div ng-repeat="user in users | filter:{'id':  1}:true">
    

    {'id': 1}说只与田野比较id.这会让你:

    simon, 1
    archie, 14
    

    :true 说"完全匹配"导致:

    simon, 1
    

    这是工作:http: //jsfiddle.net/AM95H/

    要过滤值列表,如果列表中包含范围变量,我会在JS文件中添加自定义过滤器:

    $scope.filterValues = [1,8];
    $scope.myFilter = function(value) {
       return ($scope.filterValues.indexOf(value.id) !== -1);
    };
    

    像这样使用:

    <div ng-repeat="user in users |  filter: myFilter">
    

    要过滤参数列表,我们将创建自己的过滤器.在这种情况下,我们将调用一次所有输入值来测试而不是每个值一次.

    因此,我们将收到的第一个参数是输入值数组(在您的情况下为用户),第二个参数将是我们传入的参数([1,8]).然后,我们将创建一个输出数组,并添加(推送)输入流中与其中一个匹配的任何项filterValues.并返回输出数组.

    myApp.filter('myFilter', function () {  
       return function(inputs,filterValues) {
          var output = [];
          angular.forEach(inputs, function (input) {
            if (filterValues.indexOf(input.id) !== -1)
                output.push(input);
           });
           return output;
       };
    });
    

    并像这样使用它:

    <div ng-repeat="user in users |  myFilter:[1,8]">
    

    这是一个例子:http: //jsfiddle.net/AM95H/2/

    2023-02-13 18:36 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有