首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >应用于记录集的AngularJS自定义过滤器

应用于记录集的AngularJS自定义过滤器
EN

Stack Overflow用户
提问于 2015-10-22 15:34:53
回答 2查看 126关注 0票数 1

我正在尝试使用角过滤记录集,我遇到了一个问题。

代码语言:javascript
代码运行次数:0
运行
复制
var licenseKeys = [
    {"product" : "XBox360", "inventoryProduct" : "XBox", "serialNumber" : "101", "status" : "Active", "actionBy" : "gamer1", "licenseKey" : "XB2-c40100697d-40b5bc3", "expiry" : "No Expiration"},
    {"product" : "XBox360", "inventoryProduct" : "XBox", "serialNumber" : "110", "status" : "Active", "actionBy" : "gamer2", "licenseKey" : "XB2-c4010697d-c9d7001", "expiry" : "No Expiration"},
    {"product" : "PS4", "inventoryProduct" : "Play Station", "serialNumber" : "111", "status" : "Active", "actionBy" : "gamer1", "licenseKey" : "PS4-c40100697d-c9d7081", "expiry" : "No Expiration"},
    {"product" : "PS3", "inventoryProduct" : "Play Station", "serialNumber" : "105", "status" : "InActive", "actionBy" : "gamer3", "licenseKey" : "PS3-c9d708000001", "expiry" : "No Expiration"},
    {"product" : "XBox One", "inventoryProduct" : "XBox", "serialNumber" : "109", "status" : "Active", "actionBy" : "gamer3", "licenseKey" : "XB3-40009b5bc3-c9d708000001", "expiry" : "No Expiration"},
    {"product" : "XBox", "inventoryProduct" : "XBox", "serialNumber" : "103", "status" : "Active", "actionBy" : "gamer1", "licenseKey" : "XB-c40100697d-c708d000001", "expiry" : "No Expiration"}
  ];

我在表中显示记录集,并在表标题下有筛选器下拉列表和文本框。我希望在Product 列上与完全匹配,因为选择XBox的产品会导致它在使用标准包含搜索时返回XBox、Xbox360和XBox 1。

我已经设置了两个数组,一个用来保存过滤器的键值对,另一个用来保存我想要执行精确匹配的列。

代码语言:javascript
代码运行次数:0
运行
复制
var strictSearchFields = ["product", "status"];

var searchFilter = {
  product: "",
  inventoryProduct: "",
  serialNumber: "",
  status: "",
  actionBy: "",
  licenseKey: "",
  expiry: ""
};

我在我的app.js文件中设置了一个自定义过滤器

代码语言:javascript
代码运行次数:0
运行
复制
app.filter('CustomListPageFilter', ['$filter', function($filter) {
  return function (input, searchFilters, strictSearchFields) {

    var filteredRecordset = [];

    angular.forEach(strictSearchFields, function (currentFilter) {
        if (searchFilters[currentFilter] !== "") {
            var test = currentFilter;
            filteredRecordset[currentFilter] = searchFilters[currentFilter] + " : true";
        }
    });

    return $filter('filter')(input, filteredRecordset);
  }
}]);

我在我的HTML中这样称呼它:

代码语言:javascript
代码运行次数:0
运行
复制
licenseKeys | CustomListPageFilter : searchFilter : strictSearchFields

问题是它没有按预期运行,而且无论我选择哪种产品,我最终都不会返回任何内容。我读到了这样的补充:正确地搜索您想要搜索的字段将绕过包含,但这似乎不起作用。

EN

回答 2

Stack Overflow用户

发布于 2015-10-22 17:29:27

我认为内置过滤器应该符合您的要求,您只需在过滤器中指定{field: query}对象,如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
collection | filter:{'product': 'XBox'}:true

有关尽可能接近您提供的代码的示例,请参见

http://plnkr.co/edit/lhwEKUNGOsLtDXjGAsu9?p=catalogue

我使用一个范围变量而不是一个显式对象来控制搜索查询,并使用一个复选框来切换“严格模式”。

票数 0
EN

Stack Overflow用户

发布于 2016-01-05 15:51:50

我实际上用一个自定义过滤器解决了这个问题。本质上,它被称为这样,但柱塞拥有所有的代码。

代码语言:javascript
代码运行次数:0
运行
复制
<tr ng-repeat="license in filteredLicenseKeys = (licenseKeys |
orderBy:'status' | licenseKeyFilter : searchFilters :
strictSearchFields)">

http://plnkr.co/edit/1VV2ugw9rNcM1CKQaItW?p=preview

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33284944

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档