Question

我正在学习AngularJS，我想通过用户输入过滤列表。我在理解如何处理这项任务时遇到了问题。我首先想到了一个自定义过滤器，但它对我来说没有意义，因为数据必须根据用户输入进行实时更改，而我没有看到通过指令解决此问题的解决方案。

一项服务对我来说也没有意义，因为过滤器不应该是单身，因为我想在网站的另一个地方使用它。

这是我目前的代码：

angular.module('Demo', [])
angular.module('Demo')
  .controller('FilterController', ['$rootScope', function($rootScope) {

    $rootScope.filter = {
      Tournament: {
        format: "1on1",
        type: "standard",
        mode: "regular",
        groupstage: 0
      }
    };

  }])
  .controller('ListController', ['$scope', '$rootScope', 'filterFilter', function($scope, $rootScope, filterFilter) {

    $scope.tournaments = [
      {
        Tournament: {
          id: 91173389,
          title: "Here goes a cool title",
          format: "5on5",
          type: "standard",
          mode: "regular",
          groupstage: 0,
          buyin: 50.00
        }
      },
      {
        Tournament: {
          id: 91179145,
          title: "What a cool tournament",
          format: "5on5",
          type: "freeroll",
          mode: "knockout",
          groupstage: 1,
          buyin: 0.00
        } 
      },
      {
        Tournament: {
          id: 91180055,
          title: "5K GTD Tournament",
          format: "1on1",
          type: "standard",
          mode: "direct",
          groupstage: 1,
          buyin: 100.00
        }
      }
    ];

    $scope.tournaments = filterFilter($scope.tournaments, $rootScope.filter);

  }]);

请在此处查看：http://plnkr.co/edit/vOSifa?p=preview

此代码显然不起作用，因为控制器中的filterFilter-Call仅在加载控制器后适用。

我并不是真的要求编码解决方案，因为我对如何解决这个问题更感兴趣。我希望你能帮助我！

Answer 1

以下是一个简单的解决方案，我发现允许您根据关键字进行过滤并对单个字段进行排序。

JavaScript：使用AngularJS对数据进行排序和过滤

原址：https://gist.github.com/simonbingham/3858121
Codepen：http://codepen.io/anon/pen/rwjBl

JavaScript的：

function ContactListCtrl($scope){
  $scope.contacts = [
    { "pfirstname":"Simon", "plastname":"Bingham", "ptelephone":"12345" }, 
    { "pfirstname":"Andy", "plastname":"Beer", "ptelephone":"67890" },
    { "pfirstname":"John", "plastname":"Whish", "ptelephone":"13579" }
  ];
};

HTML：

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>AngularJS Sorting &amp; Filtering Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
  </head>

  <body ng-app ng-controller="ContactListCtrl">
    <h1>AngularJS Sorting &amp; Filtering Example</h1>

    <form>
      Search: <input ng-model="query">
      <select ng-model="sortorder">
        <option value="">-- sort order --</option>
        <option value="plastname">Ascending</option>
        <option value="-plastname">Descending</option>
      </select>
    </form>

    <p>There are <strong>{{(contacts|filter:query).length}}</strong> contacts<span ng-show="query.length"> matching &quot;{{query}}&quot;</span>.</p>

    <table class="contacts" ng-show="(contacts|filter:query).length">
      <tr>
        <th>Name</th>
        <th>Telephone</th>
      </tr>

      <tr ng-repeat="contact in contacts|filter:query|orderBy:sortorder">
        <td ng-class-even="'even'">{{contact.plastname}}, {{contact.pfirstname}}</td>
        <td ng-class-even="'even'">{{contact.ptelephone}}</td>
      </tr>
    </table>
  </body>
</html>

按用户输入过滤列表

1 个答案: