arrange search filters using angular js

Question

Problem: when i input "K", it filters both name and country that contain character "K".

Question: How can i filter the input characters only in "names.name"?

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

app.controller("namesCtrl", function($scope) {
    $scope.names = [
        { name:'Jani', country:'Norway' },
        { name:'Carl', country:'Sweden' },
        { name:'Margareth', country:'England' },
        { name:'Hege', country:'Norway' },
        { name:'Joe', country:'Denmark' },
        { name:'Gustav', country:'Sweden' },
        { name:'Birgit', country:'Denmark' },
        { name:'Mary', country:'England' },
        { name:'Kai', country:'Norway' }
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
    <p>
        <input type="text" ng-model="test">
    </p>
    <ul>
        <li ng-repeat="name in names | filter:test">
            {{ name.name }}
        </li>
    </ul>
</div>

Have a look at this [link](https://stackoverflow.com/questions/17793751/how-to-filter-by-object-property-in-angularjs). Hope it helps. — holydragon, Oct 09 '18 at 09:07
select a key to search through, e.g. : `| filter: {'name' : test}` — Aleksey Solovey, Oct 09 '18 at 09:07

score 1 · Accepted Answer · answered Oct 09 '18 at 09:09

Try this

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

app.controller("namesCtrl", function($scope) {
    $scope.names = [
        { name:'Jani', country:'Norway' },
        { name:'Carl', country:'Sweden' },
        { name:'Margareth', country:'England' },
        { name:'Hege', country:'Norway' },
        { name:'Joe', country:'Denmark' },
        { name:'Gustav', country:'Sweden' },
        { name:'Birgit', country:'Denmark' },
        { name:'Mary', country:'England' },
        { name:'Kai', country:'Norway' }
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
    <p>
        <input type="text" ng-model="test">
    </p>
    <ul>
        <li ng-repeat="name in names | filter:{'name':test}">
            {{ name.name }}
        </li>
    </ul>
</div>

score 0 · Answer 2 · answered Oct 09 '18 at 09:22

Could you please use custom filter like below.

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

app.controller("namesCtrl", function($scope) {
  $scope.names = [{
      name: 'Jani',
      country: 'Norway'
    },
    {
      name: 'Carl',
      country: 'Sweden'
    },
    {
      name: 'Margareth',
      country: 'England'
    },
    {
      name: 'Hege',
      country: 'Norway'
    },
    {
      name: 'Joe',
      country: 'Denmark'
    },
    {
      name: 'Gustav',
      country: 'Sweden'
    },
    {
      name: 'Birgit',
      country: 'Denmark'
    },
    {
      name: 'Mary',
      country: 'England'
    },
    {
      name: 'Kai',
      country: 'Norway'
    }
  ];
});

app.filter('searchTerm', function() {
  return function(items, text) {
    if (text) {
      return items.filter(item => {
        return item.name.toLowerCase().includes(text)
      })
    }
    return items;
  };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
  <p>
    <input type="text" ng-model="test">
  </p>
  <ul>
    <li ng-repeat="name in names | searchTerm:test">
      {{ name.name }}
    </li>
  </ul>
</div>

arrange search filters using angular js

2 Answers2