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>

select a key to search through, e.g. : | filter: {'name' : test} — Aleksey Solovey
– Aleksey Solovey, Commented Oct 9, 2018 at 9:07

Pavan Andhukuri · Accepted Answer · 2018-10-09 09:09:10Z

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>

Karthick Srinivasan · Accepted Answer · 2018-10-09 09:22:02Z

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>

Collectives™ on Stack Overflow

arrange search filters using angular js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related