Question

我对角度很新，所以这可能非常简单，但我似乎无法让它发挥作用。我有一个应用程序，其搜索字段需要在用户输入时主动过滤结果。我的所有数据都在searchResults对象中。当我输入文本框时没有任何反应。我错过了什么？在此先感谢您的帮助。

<div>
    <input ng-model="query" name="search" id="search" type="text" placeholder="search by product or category">
    <ul id="filteredResults" ng-if="results.length">
        <li ng-repeat="result in results | filteredSearchFilter | limitTo: 10">{{result.name}}</li>
    </ul>
</div>

filteredSearch.filter.js

module.exports = function() {
  return function(data, keys, query) {
      results = [];
      if( !query ){
        return data;
      } else {
         angular.forEach( data, function( obj ){
            var matched = false;
            angular.forEach( keys, function( key ){
               if( obj[key] ){
                  // match values using angular's built-in filter
                  if ($filter('filter')([obj[key]], query).length > 0){
                     // don't add objects to results twice if multiple
                     // keys have values that match query
                     if( !matched ) {
                        results.push(obj);
                     }
                     matched = true;
                  }
               }
            });
         });
      }
      return results;
    };

Answer 1

您可以使用角度过滤器，并使用ng-model变量作为过滤器

<li ng-repeat="result  in results  | filter:query">
     <div>
       {{result .firstname}} {{result .lastname}}
     </div>
</li>

＆＃13;

angular.module('myApp', [])
  .controller('myCtrl', function($scope){
    
  $scope.results  = [
    
    {firstname: 'john', lastname: 'smith'},
    {firstname: 'jane', lastname: 'due'},
    {firstname: 'bob', lastname: 'rand'}
    
  ];
  
});

＆＃13;

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller='myCtrl'>
  <div>
    <div>
      <input type="text" placeholder="Search" ng-model="query">
    </div>
  </div>

 <ul>
   <li ng-repeat="result  in results  | filter:query">
 <div>
   {{result .firstname}} {{result .lastname}}
 </div>
 </li>
 </ul>

</body>
</html>

＆＃13;

Angular js通过文本框输入过滤对象

1 个答案: