使用過濾器顯示數組中多個匹配值

我無法顯示多值表單文本框，即輸入的值與我們需要顯示匹配值的數組值匹配，對於我只顯示一個值。請幫我找出解決方案。在這個例子中，如果輸入「ball」它顯示，如果我們輸入「ball all」它必須同時顯示「ball」「all」但是因爲它沒有顯示bcoz這裏我們不返回一個數組如果我賦值給數組，錯誤。任何人都可以幫我解決我犯的錯誤。使用過濾器顯示數組中多個匹配值

var app = angular.module('angularPracticeApp'); 
 
    app.controller('AppController', function ($scope) { 
 
    $scope.match = {}; 
 
     $scope.words = [ 
 
      { title: "ball", type: 'object' }, 
 
      { title: "wall", type: 'object' }, 
 
      { title: "all", type: 'word' }, 
 
      { title: "alloy", type: 'material' } 
 
     ]; 
 
    
 
}); 
 
    
 
    app.filter('exact', function(){ 
 
    return function(items, match){ 
 
    var matching = [], matches,resultArray = []; 
 
    
 
    angular.forEach(items, function(item){ // e.g. { title: "ball" } 
 
     matches = true; 
 
     angular.forEach(match, function(value, key){ // e.g. 'all', 'title' 
 

 
     \t var stringArray = value.split(/(\s+)/); 
 
\t  console.log(stringArray); 
 
\t  for(var i=0;i<stringArray.length;i++){ 
 
\t  \t if(!!value){ // do not compare if value is empty 
 
       matches = matches && (item[key] === stringArray[i]); 
 
       /* if(item[key] === stringArray[i]){ 
 
\t \t \t  console.log(stringArray[i]); 
 
       resultArray.push(stringArray[i]); 
 
       }*/ 
 
       
 
      } 
 
\t  } 
 
     
 
     }); 
 
     if(matches){ 
 
     \t console.log(resultArray); 
 
     matching.push(item); 
 
     } 
 
    }); 
 
    return matching; 
 
    } 
 
});

<!doctype html> 
 
<html ng-app="plunker"> 
 
    <head> 
 
    <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
 
    
 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script> 
 
    <script src="script.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="main.css" /> 
 
    </head> 
 
    <body ng-controller="AppController"> 
 
    
 
    <div> 
 
    Find words that exactly match title: 
 
    <input ng-model="match.title" /> 
 
    <br> 
 

 
    <table> 
 
     <tr ng-repeat="word in words | exact:match"> 
 
     <td>{{word.title}}</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
     
 
    </body> 
 
</html>

來源

2017-09-13 raj

抱歉無法調試您的過濾器，所以我做了我自己，請用它作爲參考。

JSFiddle Demo

JS：

var app = angular.module('myApp', []); 

app.controller('MyController', function MyController($scope) { 

    $scope.match = {}; 
     $scope.words = [ 
      { title: "ball", type: 'object' }, 
      { title: "wall", type: 'object' }, 
      { title: "all", type: 'word' }, 
      { title: "alloy", type: 'material' } 
     ]; 

}); 
app.filter('exact', function($filter){ 
    return function(items, match){ 
    console.log(match); 
    if(Object.keys(match).length !== 0){ 
     match = match.title.split(" "); 
    }else{ 
    console.log("itesm", items); 
     return items; 
    } 
     if(match){ 
      return $filter("filter")(items, function(listItem){ 
       return match.indexOf(listItem.title) != -1; 
      }); 
     } 
    }; 
});

來源

2017-09-13 18:38:29

謝謝那仁穆拉利它的正常工作。 – raj

@raj不客氣:) –

好吧，我想我明白你想要什麼，我覺得可能是更好的方法。這裏的解決方案，我爲你準備的，它是乾淨多了：

http://jsfiddle.net/U3pVM/33950/ HTML：

<div ng-app> 
    <div ng-controller="SomeCtrl"> 
    <div> 
     Find words that exactly match title: 
     <input ng-model="match.title" /> 
     <br> 

     <table> 
     <tr ng-repeat="word in wordsCopy"> 
      <td>{{word.title}}</td> 
     </tr> 
     </table> 
    </div> 
    </div> 
</div>

和JS：

function SomeCtrl($scope) { 
    $scope.words = [{ 
    title: "ball", 
    type: 'object' 
    }, { 
    title: "wall", 
    type: 'object' 
    }, { 
    title: "all", 
    type: 'word' 
    }, { 
    title: "alloy", 
    type: 'material' 
    }]; 
    $scope.wordsCopy = $scope.words; 
    $scope.$watch('match.title', (newVal, oldVal) => { 
    if (newVal) { 
     $scope.wordsCopy = $scope.words.filter((val, index) => { 
     return newVal.split(' ').indexOf(val.title) !== -1; 
     }); 
    } else { 
     $scope.wordsCopy = $scope.words; 
    } 
    }); 
};

來源

2017-09-13 18:22:59 pegla

太感謝你了PEGLA它的正常工作.. – raj

使用過濾器顯示數組中多個匹配值

回答

相關問題