Question

我在HTML页面中有一个搜索框和多个类别链接。

一旦用户在searchBox中输入，我想显示：

p in Products | filter {serachedText}

当用户点击类别超链接时，我想显示

p in Products | filter {categoryID}

但是因为serachedText仍然是avialble，结果显示为

p in Products | filter {categoryID} | filter {serachedText}

有用的方法我可以在用户点击任何链接后立即清除serachedText。

Answer 1

在angularjs中这很容易做到。

在html中。

<input ng-model="mytext">
<a href ng-click="mytext=''">Clear Text</a>

jsfiddle is here.

Answer 2

您的过滤器表达式错误。

如果您的数据是具有类别和名称属性的JSON数组，那么：

self.Products = [
  { category: 1, name: 'Pencil' },
  { category: 1, name: 'Notebook' },
  { category: 2, name: 'Kitten' }
];

您正在为所选类别和搜索文本绑定以下内容：

self.category = 1;
self.searchText = 'pen';

您可以创建一个复杂的过滤器表达式，如下所示：

filter: { category: vm.category | name: vm.searchText }

这将过滤类别和searchText或组合。

要清除searchText，您可以使用$ scope。$ watch查看类别更改，以及更改时，清除searchText。

请查看以下示例或http://plnkr.co/edit/OEDvOn。在这个例子中，我的过滤器表达式有点复杂，因为所选类别实际上是一个包含所选类别的值和名称属性的对象，因此我需要添加.value以获得正确的东西传递给过滤器。

另一点：对于客户端过滤，这很好，但如果您在服务器端进行过滤，我宁愿在服务层上完成过滤，只返回过滤后的结果而不是所有可能的数据...节省带宽和转移时间。

＆＃13;

(function(undefined) {
  'use strict';
  
  angular.module('myApp',[]);
  
  angular.module('myApp')
    .controller('searchCtrl', searchCtrl);
    
  searchCtrl.$inject = ['$log', '$scope'];
  
  function searchCtrl($log, $scope) {
    /* jshint validthis: true */
    var self = this;
    
    self.searchText = undefined;
    
    self.categories = [
      { value: undefined, name: 'All' },
      { value: 1, name: 'Fruit' },  
      { value: 2, name: 'Snacks' },
      { value: 3, name: 'Flower' },
      { value: 4, name: 'Pet' },
      { value: 5, name: 'Stationary' }
    ];

    self.category = self.categories[0];
    
    self.data  = [
      { category: 1, name: 'Apple' },
      { category: 1, name: 'Grapes' },
      { category: 2, name: 'Dorito' },
      { category: 2, name: 'KitKat' },
      { category: 3, name: 'Roses' },
      { category: 3, name: 'Orchid' },
      { category: 4, name: 'Hamster' },
      { category: 4, name: 'Kitten' },
      { category: 5, name: 'Pencil' },
      { category: 5, name: 'Notebook' }
      ];
    
    $scope.$watch(function() { return self.category; }, function(val, old) {
      self.searchText = undefined;
    });
  }

}());

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    <div class="container" ng-app="myApp" ng-controller="searchCtrl as vm">

      <div class="form-group">
        <label>Category</label>
        <select class="form-control" ng-options="cat.name for cat in vm.categories" ng-model="vm.category">
        </select>
      </div>
    
      <div class="input-group">
        <input class="form-control" type="textbox" ng-model="vm.searchText" placeholder="Search text here..." />
        <span class="input-group-btn">
          <button type="button" class="btn btn-primary">
            <i class="glyphicon glyphicon-search"></i> Search</button>
        </span>
      </div>
      
      <div class="well well-sm" style="margin-top:20px">
        <ul ng-repeat="item in vm.data | filter:{category:vm.category.value, name:vm.searchText}">
          <li>{{item.name}}</li>
        </ul>
      </div>
    </div>

＆＃13;

Answer 3

我建议指令将是最好的选择

<强>标记

<input ng-model="mytext">
<a href ng-click="mytext=''" clear="mytext">Clear Text</a>

<强>指令

app.directive('a', function() {
    return {
        restrict: 'E',
        scope: {
            clear: '='
        },
        compile: function(scope, ele, attrs) {
            ele.on('click', function() {
                scope.$apply(function() {
                    scope.clear = undefined;
                })
            })
        }
    }
})

如何在单击AngularJS页面中的任何链接时清除angularJS中的文本框

3 个答案: