Twitter Bootstrap Question posted in

displaying a multiple matching values from array using filter-Twitter bootstrap

I am having trouble displaying the multiple values form text box i.e an entered values is matching with an values of array we need to display the matching value,for me displaying only one value. please help me to find out the solution.
in this example if type “ball” it’s displaying if we type “ball all” it has to show both “ball” “all” but for it’s not displaying bcoz here we are not returning an array if i assign to array it’s throwing an errors.can any one help me where i did mistake.

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>
Tags:

2

Answers


  1. 0

    Ok I think I understand what you want and I think there might be better approach. Here’s solution I prepared for you, it’s much cleaner:

    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>

    and 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;
    }
  });
};
    Login or Signup to reply.
  2. 0

    Sorry could not debug your filter, so I made my own, please use it as reference.

    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;
            });
        }
    };
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search