Custom search filter in angularjs

Question

I am using the inbuilt search filter of angular js like this-

<!--header starts-->
<input class="form-control fs-mini search" ng-model="search.name" type="text" placeholder="&#xe80a Search">   
<!--header ends-->
<!--content area-->
<div  ng-repeat="user in users  | filter:search">
                {{ user.name }}
                            {{user.l}}


                            {{user.time}}

            </div>
<!--content area ends-->

Now i removed the header template codes and created the header directive.

<!--header starts-->
 <div site-header>
   </div>
<!--header ends-->
<!--content area-->
<div  ng-repeat="user in users  | filter:search">
                {{ user.name }}
                            {{user.l}}


                            {{user.time}}

            </div>
<!--content area ends-->

site-header.js:

'use strict';

    angular.module('myApp')
        .directive('siteHeader', function () {
            return {
                templateUrl: 'views/header-view.html',
                scope: {

                },
                restrict: 'A',
                controller: [ '$scope', '$rootScope', '$location', function($scope, $rootScope, $location) {
                            console.log($scope.data);
                }],
                link: function postLink(scope, element, attrs) {

                }
            };
        });

header-view.html

<input class="form-control fs-mini search" ng-model="search.name" type="text" placeholder="&#xe80a Search">

All html templates is loading correctly. but the search filter is not working. I dont understand how to bind search.name to the directive in order to work. I tried like this-

<div site-header="search.name">
   </div>

but how to access this data in directive and bind it to ng-model?

Write a custom filter in the controller like below and check whether it's working or not. $scope.filterByName = function(item) { if(!$scope.search) return true; var itemName = angular.lowercase(item.name); return (itemName.indexOf(searchItem) !== -1); }; — ABHILASH SB
– ABHILASH SB, Commented May 14, 2015 at 7:04

Pindakaas · Accepted Answer · 2015-05-14 10:25:52Z

1

Change your directive definition:

app.directive('myDirective', function(){
      return {
        restrict: 'A',
        template: [
            '<input class="form-control fs-mini search" ng-model="search.name" type="text" placeholder="&#xe80a Search"/>'
          ].join(''),
        scope: true
      }
    });

here is a demo:http://plnkr.co/edit/JNCjzs?p=preview

edited May 14, 2015 at 10:25

answered May 14, 2015 at 6:46

Pindakaas

4,45916 gold badges52 silver badges83 bronze badges

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

2 Comments

Pindakaas Over a year ago

I changed it slightly

NeiL Over a year ago

It works. can you provide me the resource to read about this concept.Its hard to grab. Specially the use of ng-init="search.name = 'type in filter'"

skolsuper · Accepted Answer · 2015-05-14 07:10:21Z

0

Directives get their own scopes in angular. Scopes prototypically inherit from their parent scopes, which can be confusing and takes some time and knowledge of js inheritance to get your head around. If you can't be bothered with that, a quick solution to your problem would be to use an object to store the search string and instantiate it in the parent scope, which will make it available in both scopes. I think all you need is to put the line:

`var search = {};`

in your controller.

answered May 14, 2015 at 7:10

skolsuper

6391 gold badge6 silver badges21 bronze badges

Collectives™ on Stack Overflow

Custom search filter in angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related