【问题标题】:Filter either ONLY one property or all fields仅过滤一个属性或所有字段
【发布时间】:2015-06-18 03:47:24
【问题描述】:

我正在创建一个站点,其中的对象都具有“标签”属性,即字符串列表。

我正在创建一个搜索功能来过滤列表中的所有元素。如果用户输入“#something here”,那么我只想将用户输入与每个属性的标签匹配。如果用户只是在搜索框中输入一个字符串,那么我想搜索所有对象属性。

我有一个这样定义的表单:

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input data-ng-model="$root.searchText" type="text" class="form-control" placeholder="#hashtag or just a string">
  </div>
</form>

我知道,如果我使用我想要的字段定义 data-ng-model,则可以按照我想要的方式使用默认过滤器。所以如果我只想搜索标签,我会做 data-ng-model='$root.searchText.tags',用户输入只会匹配。如果我想全部搜索,那么我会执行 data-ng-model='$root.searchText.$'。

但是如何根据用户是否输入以“#”开头的字符串来进行模型切换?

我尝试过创建自定义过滤器,但结果令人困惑。应该有某种条件语句将模型设置为 $root.searchText.tags 或 $root.searchText.$,但我认为这更难。有谁知道如何构造该条件语句?

【问题讨论】:

    标签: angularjs angularjs-filter meanjs


    【解决方案1】:

    我有一个解决方案给你,虽然它可能不是最好的解决方法。 您查看搜索过滤器并根据您的逻辑更新列表:

    1.如果searchText以'#'开头,则按标签过滤

    2.fitler by properties values if searchText donot以'#'开头

    $scope.$watch('model.search', function(search){
        var tagFilter,results;
          if(search.startsWith('#')) { //handle tag filter logic
            tagFilters = search.split('#');
            console.log(tagFilters);
            results = _.filter($scope.model.lists, function(obj){
              return _.intersection(obj.tags, tagFilters).length > 0;
            });
          } else { //handle property filter logic
            results = _.filter($scope.model.lists, function (obj) {
              return _.values(obj).some(function (el) {
                  return el.indexOf(search) > -1;
              });
            });
          }
            console.log(results);
          $scope.model.displayItems = results;
    
        }, true);
    

    plnkr

    【讨论】:

    • 这很好用!现在唯一的问题是在页面加载时,我自己代码中的 $scope.model.lists 实际上是空的,必须从数据库中异步查询。因此,当页面第一次加载时,屏幕上没有任何内容,因为监视过滤器运行一个空列表。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-01-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多