按特定属性中的文本过滤答案

【问题标题】：filter by text in specifiec property按特定属性中的文本过滤
【发布时间】：2017-04-01 12:34:53
【问题描述】：

我有一个对象数组，比如那些

{ name: "task1", owner: "david", des: "task1 description" },
{ name: "task2", owner: "Smith", des: "task2 description" },
{ name: "task1", owner: "david", des: "task1 description" },

也是select 和textbox 以及一个显示所有内容的表格。

我正在寻找filter 的方法，表中的数据。用户将从下拉列表中选择一个值并在文本框中输入文本。

然后表格数据将通过下拉选择值（对象属性）中的文本匹配进行过滤。

例子：

从下拉列表中选择“名称”并在文本框中写入“任务”将返回数组中的所有 3 个项目。 text word 包含在所有 3 条记录中。
从下拉列表中选择“名称”并在文本框中写入“task1”将返回记录 1 和 3。

文本框值将是发生过滤器所必需的。

可以用angularjs过滤吗？

https://plnkr.co/edit/Afs7MOIziUOvFWzBY7qf?p=preview

【问题讨论】：

过滤器文档页面上的演示几乎可以做到这一点：docs.angularjs.org/api/ng/filter/filter。所以你的问题的答案是肯定的，是可以做到的。
我更新了我的 plunker，我似乎无法让它工作 - 你能告诉我我做错了什么吗？ + 另外，如果文本框不为空，我希望 w 过滤器仅进行，我该如何实现？
plnkr.co/edit/kCI875Qg9FKccpMlF6gY?p=preview
你的 plunker 对我不起作用，我选择了“名称”输入文本“任务”并且没有发生任何事情，当用户不从下拉列表中选择时，我应该如何仅按文本过滤
它对我来说很好用。它显示所有任务，因为每个名称中都包含“任务”一词！

标签： angularjs

【解决方案1】：

您需要在text-box 上使用ng-disabled 属性

工作Plunker

html需要更新

<input ng-model="filterdata[filterProperty]" type="text" ng-disabled="!filterProperty" />

【讨论】：

【解决方案2】：

此时编写自定义过滤器可能是最简单的。自定义过滤器非常简单直接，允许您控制过滤器应用方式和时间的所有方面。这是您案例的工作示例 - 它不是很健壮，因为如果您尝试过滤数字属性，它会中断，但它为您提供了要点和一些可以根据您的需求进行构建和定制的东西。

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.cards = [{
        name: "task1",
        owner: "david",
        des: "task1 description"
      },
      {
        name: "task2",
        owner: "Smith",
        des: "task2 description"
      },
      {
        name: "task3",
        owner: "Smith",
        des: "task3 description"
      },
      {
        name: "task4",
        owner: "Davis",
        des: "task4 description"
      },
      {
        name: "task5",
        owner: "Thomas",
        des: "task5 description"
      },
      {
        name: "task6",
        owner: "david",
        des: "task6 description"
      }
    ];
  })
  .filter('myFilter', function() {
    return function(items, property, value) {
      // if items, property or value are missing return items by default
      if (!items || !property || !value) {
        return items;
      }
      // create an array to hold the matched items
      var out = [];
      angular.forEach(items, function(item) {
        // see if the item property value contains the desired value
        if (item[property].toLowerCase().includes(value.toLowerCase())) {
          out.push(item);
        }
      });
      // return the array of items
      return out;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <div>
      <select ng-model="filterProperty">
          <option value="">filter by</option>
          <option value="name">name</option>
          <option value="owner">owner</option>
          <option value="des">des</option>
        </select>
      <input ng-model="filterData" type="text" />
    </div>
    <table style="border: 1px solid">
      <tbody>
        <tr>
          <th>name</th>
          <th>owner</th>
          <th>description</th>
        </tr>
        <tr ng-repeat="x in cards | myFilter:filterProperty:filterData">
          <td>{{x.name}}</td>
          <td>{{x.owner}}</td>
          <td>{{x.des}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

【讨论】：

我制作的 plunker 很简单，可以描述我的问题。但在我拥有的真实应用程序中，如果我想使用自定义过滤器，我需要运行 3 个 for 循环，因为我没有在表格中显示数据，该应用程序类似于 Github 看板 - 我需要使用 1'st for 循环查找特定板 > 然后查找特定类别 > 和特定卡。我认为@Gaurav 将是快速解决它的方法。谢谢