Filtering an ng-repeat based on multiple values in angular

Question

This is difficult to phrase but: I have 1 collection called users.
Every user has 3 properies: id, name, skill.

    {
        _id: 1,
        name: 'frank young',
        skill: 'java'
    },

I have 1 form collects search results upon pressing enter.

<form ng-submit="pushToNewArry(searchTerm)">
    <input type="text" ng-model="searchTerm" />
    <input type="submit">
</form>

this is not the best way to do this

$scope.newUsers = [];
$scope.pushToNewArry = function(msg) {
    $scope.trackedUsers.push(msg);
    $scope.searchTerm = '';
};

Question:

How do I create a filter that will run over multiple search terms and create a list proper matches based on the users collections vs inputed values.

<ol ng-repeat = "user in users | filter: trackedUsers">
    <li class="names"><span>{{$index}}. </span>{{user.name}}</li>
    <li class="skills">{{user.skill}}</li> 
</ol>

Upon submission, the user input will be saved and create a new array of users based on inputed values of search. therefore, multiple matching values.

Updated:

JSFiddle

not excatly the same as example above because I keep playing with it.

Could you please elaborate on what you mean by: create a list proper matches based on the users collections vs inputed values. — Nikolay Melnikov
– Nikolay Melnikov, Commented Oct 15, 2014 at 0:30

wayne · Accepted Answer · 2014-10-17 03:46:04Z

2

You mean like this jsfriddle

updated fiddle

updated fiddle2

<div>{{listSearchTerms | json}}</div>
<form ng-submit="saveSearchTerm()">
    <input type="text" ng-model="searchTerm" />
    <input type="submit">
</form>
<ol  ng-repeat = "user in users | filter:filterSearch(searchTerm)">
    <li class="names"><span>{{$index}}. </span>{{user.name}}</li>
    <li class="skills">{{user.skill}}</li> 
</ol>

Javascript

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

//App.directive('myDirective', function() {});
//App.factory('myService', function() {});

app.controller('MainCtrl', function ($scope) {
    $scope.users = [
        {
            _id: 1,
            name: 'frank young',
            skill: 'java'
        },
        {
            name: 'jeff qua',
            skill: 'javascript'
        },
        {
            name: 'frank yang',
            skill: 'python'
        },
        {
            name: 'ethan nam',
            skill: 'python'
        },
        {
            name: 'ethan nam',
            skill: 'javascript'
        },
    ];
    $scope.searchTerm = "";
    $scope.listSearchTerms = [];
$scope.filterSearch = function (terms) {
    return function (item) {
        return terms.length < 1 ? true : 
        terms.reduce(function (lastresult, term) {
            return lastresult + (item.name.indexOf(term) > -1 || item.skill.indexOf(term) > -1);
        }, 0) > 0;

    }
};
    $scope.saveSearchTerm = function () {
        $scope.listSearchTerms.push($scope.searchTerm);
        $scope.searchTerm = "";
    }
});

edited Oct 17, 2014 at 3:46

answered Oct 15, 2014 at 1:38

wayne

3,41022 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Abraham Over a year ago

Yes but I would liek to treat this like tags in Stack. where when you add them those become fixed to the query. meaning, if i type in javascript and press enter: it will always show people that know javascript. then if I type in frank and type enter: it will show me all people that know javascript and all people that are named frank.

John Abraham Over a year ago

Dang wayne super close! but can the second input be filtered from the original users collection and not a filter of the filtered array. Essentially, if one submits 'python' and 'jeff' to listSearchTerms. The results will return 3 people: jeff qua (javascript), frank yang(python), ethan nam(python). Lastly, thanks so much for your help you're a rockstar.

Collectives™ on Stack Overflow

Filtering an ng-repeat based on multiple values in angular

JSFiddle

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related