Question

构建一个基于输入字段过滤结果的简单应用。我正在添加一堆超出重复列表的链接，点击后我希望能够过滤下面的列表。

我在网上搜索了解决这个问题的各种方法，但尚未找到解决方案。

我已经通过搜索过滤了，但我希望能够点击一个热门搜索条目的链接。

我的代码是：

<a href="">tag one</a>
<a href="">tag two</a>
<a href="">tag three</a>

<tr ng-repeat="item in items | orderBy:'date' | filter:itemsFilter" ng-click="clickedItem(item.id)">
      <td><a href="{{item.url}}"><img ng-src="{{item.imageUrl}}" alt="{{item.title}}"></a></td>
      <td>
        <a href="{{item.url}}">{{item.title}}</a><br>
      </td>
      <td><i class="el el-time"></i> {d{item.date}}</td>
      <td class="drop-me">{{item.description}}</td>
      <td class="tag-me">{{item.tag}}</td>
    </tr>
    <tr ng-hide="item.length == 0"><td><p>There are no items!</p></td></tr>

我尝试过自定义过滤器，只是想办法通过ng-click注入项目并更新下面的列表。

我想点击其中一个标记链接并过滤下面的列表

由于

Answer 1

尝试添加 ng-href

<a ng-href="">tag one</a>
<a ng-href="">tag two</a>
<a ng-href="">tag three</a>

<tr ng-repeat="item in items | orderBy:'date' | filter:itemsFilter" ng-click="clickedItem(item.id)">
      <td><a ng-href="{{item.url}}"><img ng-src="{{item.imageUrl}}" alt="{{item.title}}"></a></td>
      <td>
        <a ng-href="{{item.url}}">{{item.title}}</a><br>
      </td>
      <td><i class="el el-time"></i> {d{item.date}}</td>
      <td class="drop-me">{{item.description}}</td>
      <td class="tag-me">{{item.tag}}</td>
    </tr>
    <tr ng-hide="item.length == 0"><td><p>There are no items!</p></td></tr>

Answer 2

根据评论中的建议，您可以创建一个阵列，您要为其添加标记以进行过滤，而在自定义过滤器中，您可以过滤项目数组。

同样ngTagsInput是一个很好的指令，它有助于创建带标签的输入字段。

请查看下面的演示或此jsfiddle。

angular.module('demoApp', ['ngTagsInput'])
  // filter from here (with some modifications) http://stackoverflow.com/questions/23785592/apply-dynamic-filters-using-tags
  .filter('filterByTags', function() {
    return function(items, tags) {
      var filtered = []; // Put here only items that match
      (items || []).forEach(function(item) { // Check each item
        var matches = tags.some(function(tag) { // If there is some tag
          return item.tag == tag.text;
        }); // we have a match
        if (matches) { // If it matches
          filtered.push(item); // put it into the `filtered` array
        }
      });
      return filtered.length == 0 ? items : filtered; // Return the array with items that match any tag // return all if no tags
    };
  })
  .controller('mainController', MainCtrl);

function MainCtrl() {
  var vm = this;

  function isTagInTags(tag) {
    var seen = false;
    //console.log('test', tag);
    for (var i = 0; i < vm.tags.length; i++) {
      //console.log(vm.tags[i].text, tag);
      if (vm.tags[i].text == tag) {
        seen = true;
        return seen;
      }
    }
    return seen;
  }

  vm.addTag = function(tag) {
    //console.log(tag);
    if (!isTagInTags(tag)) {
      vm.tags.push({
        text: tag
      });
    }
  };

  vm.data = [{
    id: 0,
    tag: 'JavaScript',
    title: 'this is JS related'
  }, {
    id: 1,
    tag: 'Java',
    title: 'this is Java related'
  }, {
    id: 2,
    tag: 'Python',
    title: 'this is Python related'
  }, {
    id: 3,
    tag: 'Python',
    title: 'also Python stuff...'
  }];

  var unique = [];
  vm.availTags = [];
  for (i in vm.data) {
    var item = vm.data[i];
    //console.log(item);
    if (unique.indexOf(item.tag) === -1) {
      unique.push(item.tag);
      vm.availTags.push(item.tag);
    }
  }

  vm.loadItems = function(query) {
      //console.log(query);
      return vm.availTags.filter(function(tag) {
        var testTag = tag.toLowerCase();
        return testTag.indexOf(query.toLowerCase()) >= 0;
      });
      //return $http.get('/tags?query=' + query); // use this with a backend
    }
    //console.log(vm.availTags);

  vm.tags = []; //vm.availTags[0];
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.css" rel="stylesheet" />
<div ng-app="demoApp" ng-controller="mainController as ctrl">
  <button ng-click="ctrl.addTag('JavaScript')">
    JavaScript
  </button>
  <button ng-click="ctrl.addTag('Java')">
    Java
  </button>
  <!--{{ctrl.tags}}-->
  <tags-input ng-model="ctrl.tags">
    <auto-complete source="ctrl.loadItems($query)"></auto-complete>
  </tags-input>

  <div ng-repeat="item in ctrl.data | filterByTags: ctrl.tags">
    {{item.title}}
  </div>
</div>

angularjs过滤列表外的ng-repeat链接

2 个答案: