Question

我在显示文本框的多个值时遇到问题，即输入的值与我们需要显示匹配值的数组值匹配，因为我只显示一个值。请帮我找出解决方案。在这个例子中如果键入“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'

      	var stringArray = value.split(/(\s+)/);
	      console.log(stringArray);
	    for(var i=0;i<stringArray.length;i++){
	    	 if(!!value){ // do not compare if value is empty
              matches = matches && (item[key] === stringArray[i]);
              /* if(item[key] === stringArray[i]){
			     console.log(stringArray[i]);
                 resultArray.push(stringArray[i]);
               }*/
               
           }
	    }
       
      });
      if(matches){
      	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>

Answer 1

好的我想我明白你想要什么，我认为可能有更好的方法。这是我为你准备的解决方案，它更清洁：

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

Answer 2

抱歉无法调试您的过滤器，所以我自己制作，请将其用作参考。

JSFiddle Demo

<强> JS：

std::unique_ptr

使用过滤器从数组中显示多个匹配值

2 个答案: