テクスチャボックス入力でオブジェクトをフィルタリングする角度js

これは非常に単純かもしれないので、私は本当に角度が新しくなっていますが、動作させることはできません。私は、ユーザーが入力すると積極的に結果をフィルタリングする必要がある検索フィールドを持つアプリケーションを持っています。私のすべてのデータはsearchResultsオブジェクトにあります。テキストボックスに入力すると何も起こりません。私は何が欠けていますか？あなたの助けを前にありがとう。あなたはフィルタとして角度フィルタ、および使用NG-モデルの変数を使用することができますテクスチャボックス入力でオブジェクトをフィルタリングする角度js

<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; 
    };

出典

2016-11-18 luigilife

I実現するオブジェクトを配列に変換する必要があります。名前キーだけが必要です。何か案は？ – luigilife

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

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

<!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>

出典

2016-11-18 03:01:26 Sajeetharan

ありがとうSajeetharan。これは私のために働いていないので、私はオフになっている何かを持っている必要があります。おそらく、カスタムフィルターが行く方法かもしれないと思っていました。私はそれの中でスコープにアクセスすることができないと信じて以来、いずれかのカスタムフィルタを動作させることはできませんでした。その上の任意のアイデア？ – luigilife

私は自分の問題の一部を理解しました - 実際にはオブジェクトをフィルタリングしようとしていますが、result.nameが必要です。私はこれを反映するために私の質問を更新しました。 – luigilife

テクスチャボックス入力でオブジェクトをフィルタリングする角度js

答えて

関連する問題