【问题标题】:How to use ngTagsInput to filter data如何使用 ngTagsInput 过滤数据
【发布时间】:2017-03-27 04:45:02
【问题描述】:

我有可以扩展搜索的代码,但我需要帮助来缩小搜索范围。一个例子是添加标签(颜色、绿色)并且只显示“绿色”而不是所有颜色和手臂。

这是我的例子:http://codepen.io/stvgale/pen/vxzBXO

app.filter('filterByTags', function () {
return function (items, tags) {
if (!tags || !tags.length) {
  return items;
}

var lowerTags = angular.copy(tags);
angular.forEach(lowerTags, function (tag) {
  tag.text = angular.lowercase(tag.text); 
});

var filtered = [];
(items || []).forEach(function (item) {
  var matches = lowerTags.some(function (tag) {
    return (angular.lowercase(item.data1).indexOf(tag.text) > -1) ||
           (angular.lowercase(item.data2).indexOf(tag.text) > -1);
  });
  if (matches) {
    filtered.push(item);
  }

});

return filtered;
};});

【问题讨论】:

    标签: javascript html angularjs ng-tags-input


    【解决方案1】:

    你可以使用正则表达式

    加入您的标签数组以获取搜索文本

    var searchtext = lowerTags.map(function(elem){
            return elem.text;
        }).join(" ");
    

    例如,如果您的标签是color,green

    var searchtext 将是 color green

    然后您可以将此文本用作正则表达式模式来检查哪些项目匹配

    var patt = new RegExp(searchtext,'i');
    

    并返回匹配的项目

    var filtered = [];
        (items || []).forEach(function (item) {
          var matches = lowerTags.some(function (tag) {
            return patt.test(item.data2);
          });
          if (matches) {
            filtered.push(item);
          }
    
        });
    
        return filtered;
    

    这里是FULL Example

    【讨论】:

    • 感谢您的回答。唯一的问题是,如果你做绿色,颜色什么都不会出现。
    • 您可以反转字符串并使用正则表达式匹配,但这会变得很难看。我建议您更改 JSON 结构。
    猜你喜欢
    • 1970-01-01
    • 2019-10-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-08-09
    • 2020-12-15
    相关资源
    最近更新 更多