Question

我有一组对象，比如那些

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

还有select和textbox 以及一张显示所有内容的表格。

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

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

示例：

选择＆＃34; name＆＃34;从下拉列表中写出＆＃34;任务＆＃34;在文本框中将返回数组中的所有3项。文本字包含在所有3条记录中。
选择＆＃34; name＆＃34;从下拉列表中写出＆＃34; task1＆＃34;在文本框中将返回记录1和3。

文本框值过滤器需要。

可以用angularjs过滤器完成吗？

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

Answer 1

此时编写自定义过滤器可能最简单。自定义过滤器非常简单直接，允许您控制应用过滤器的方式和时间的所有方面。这是一个适用于您的案例的工作示例 - 它不是非常强大，因为如果您尝试过滤数字属性它将会中断，但它为您提供了要点和基于您的需求进行定制的要点。

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>

Answer 2

您需要在ng-disabled

上使用text-box属性

工作Plunker

Html需要更新

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

在特定属性中按文本过滤

2 个答案: