Git Product home page Git Product logo

dynamic-filters's Introduction

Dynamic Filters

This directive allows you to easily create filters that the user can create themselves.

Before going any further with this, here's an example to demonstrate how it works: http://plnkr.co/edit/NfQPBasnnakMuHbKHczq?p=preview

Usage

Firstly include the directive on the page:

<dynamic-filters filters-array="filters" search-object="search"></dynamic-filters>

In order to filter on a data source the directive will need included within a controller which has access to the data, in this case our resultsCtrl controller. It is then simply a case of iterating over the data and including the filter on the ng-repeat:

<div ng-controller="resultsCtrl">
    <dynamic-filters filters-array="filters" search-object="search"></dynamic-filters>
    <div ng-repeat="person in persons | filter: search">
      {{person.name}}
    </div>
</div>

We now need to set up our controller. The controller should have the data source within it, in this example it is hard coded. Normally this would come from a backend JSON source. We also need to define certain scope variables within this controller. This is an example of what it should look like:

angular.module('app', ['dynamicFiltersDirective'])

.controller('resultsCtrl', function($scope){
   $scope.filters = [{id: 'filter1'}];
   $scope.search = {};

        // our data to be filtered on
	    $scope.persons = [{
          name: 'Jim',
         	age: 21,
          customerId: 1,
          productId: 4
      },{
          name: 'Frank',
         	age: 20,
          customerId: 2,
          productId: 4
      },{
          name: 'Bob',
         	age: 20,
          customerId: 3,
          productId: 5
      },{
          name: 'Bill',
         	age: 20,
          customerId: 3,
          productId: 5
      }];
	});

Things to note

If the same option has been selected more than once and then the minus button is clicked to remove one of these filters, all filters using that option will be removed from the filtering of results.

If you select the same option more than once then the value for all these options will be updated when changing the values. This is because they use the same model.

Todo

1 - prevent duplicate options from being selected

I hope this is enough to get going with it. Enjoy!

-CaptainChainsaw

dynamic-filters's People

Contributors

captainchainsaw avatar

Stargazers

Carlos Eduardo Olivieri avatar Thomas Grant avatar

Watchers

Thomas Grant avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.