AngularJS filter by specific item in array

Question

I'm in Angular 1.4.8. I'm using a basic search filter to find a user. The search works, but is searching the whole data set. For instance searching below for "Mar" would find three results because one last name contains Mar. I would like to search only by first name. The ultimate goal is to find the number of records found: Result {{count}}. So searching for "St" should find ONE result, the first name Steve (not Stanford).

Here's a fiddle: http://jsfiddle.net/mediaguru/z5shgzxw/1/

  <div ng-app="myApp">
    <div ng-controller="MyCtrl">
      <input type="text" ng-model="search">
      <table>
        <tbody>
          <tr ng-repeat="item in items">
            <td>ID: {{item.id}}</td>
            <td>Name: {{item.firstname}}</td>
            <td>Gender: {{item.lastname}}</td>
          </tr>
        </tbody>
      </table>
      Result {{count}}
    </div>
  </div>

JS

  var myApp = angular.module('myApp', []);
  myApp.controller('MyCtrl', ['$scope', '$filter', function($scope, $filter) {


    $scope.items = [{
      id: 1,
      firstname: 'John',
      lastname: 'Jones'
    }, {
      id: 2,
      firstname: 'Steve',
      lastname: 'Jones'
    }, {
      id: 3,
      firstname: 'Joey',
      lastname: 'Maritza'
    }, {
      id: 4,
      firstname: 'Mary',
      lastname: 'Linqust'
    }, {
      id: 5,
      firstname: 'Marylin',
      lastname: 'Stanford'
    }];

    $scope.items2 = $scope.items;

    $scope.$watch('search', function(val) {
      $scope.items = $filter('filter')($scope.items2, val);
      $scope.count = $scope.items.length;
    });


  }]);

Luis Machillanda · Accepted Answer · 2017-08-02 20:28:16Z

4

You must do this:

$scope.items = $filter('filter')($scope.items2, {firstname:val});

it's all.

answered Aug 2, 2017 at 20:28

Luis Machillanda

1113 bronze badges

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

Comments

sameera lakshitha · Accepted Answer · 2017-08-02 21:16:39Z

0

You must write ($scope.items2, {firstname:val});

You can solve your problem by using below code.

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', '$filter', function($scope, $filter) {

$scope.items = [{ 
  id: 1,
  firstname: 'John',
  lastname: 'Jones'
}, {
  id: 2,
  firstname: 'Steve',
  lastname: 'Jones'
}, {
  id: 3,
  firstname: 'Joey',
  lastname: 'Maritza'
}, {
  id: 4,
  firstname: 'Mary',
  lastname: 'Linqust'
}, {
  id: 5,
  firstname: 'Marylin',
  lastname: 'Stanford'
}];

$scope.items2 = $scope.items;

$scope.$watch('search', function(val) {
  $scope.items = $filter('filter')($scope.items2, {firstname:val});
  $scope.count = $scope.items.length;
});
}]);

answered Aug 2, 2017 at 21:16

sameera lakshitha

1,9814 gold badges23 silver badges29 bronze badges

Collectives™ on Stack Overflow

AngularJS filter by specific item in array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related