フィルタを使用して配列から複数の一致する値を表示

複数値フォームのテキストボックスを表示する際に問題があります。つまり、値が1つしか表示されない場合は入力値が一致する値を表示する必要があります。解決策を見つけるのを助けてください。この例では "ball"と入力すると "ball all"と表示されますが、 "ball" "all"が表示されますが、bcozは表示されません。ここで配列を返すわけではありません。 errors.can誰かが私が間違ったところで私を助けます。フィルタを使用して配列から複数の一致する値を表示

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

はそれがうまく働いているあなたにNarenムラリをありがとう...それがうまく働いているので、多くのpeglaをお願いします。 – raj

@rajあなたは大歓迎です:) –

[OK]を私は私はあなたが望むものを理解だと思うし、私はより良いアプローチがあるかもしれないと思います。

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

は – raj

フィルタを使用して配列から複数の一致する値を表示

答えて

関連する問題