Angular Custom Filter

by pj_js15

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular-resource.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div ng-controller="myFilterCtrl">
    <h4>{{ message }}</h4>
    
    <div class="filterComponentsContainer">
        <!--
         <div class="dropdown btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                Action
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">Foo</a></li>
                <li><a href="#">Bar</a></li>
            </ul>
        </div>
        -->
        <input id="txtSearch" type="text" placeholder="Search (model, color, company)" ng-model="searchModel" />
        <h6>Result Count {{ (phoneData | filter:searchModel).length }}</h6>
    </div><!-- End of filterComponentsContainer -->
    <hr />
    
    <table class="table">
        <thead>
            <tr>
                <th>Phone Model</th>
                <th>Color</th>
                <th>Company</th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="phone in phoneData | filter:searchModel">
                <td>{{ phone.model }}</td>
                <td>{{ phone.color }}</td>
                <td>{{ phone.company.name }}</td>
            </tr>
        </tbody>
    </table>


<!-- Add Data Code -->
<!-- ========================================== -->


<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Add Data</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"...

CSS

.filterComponentsContainer{    
    margin: 5px;
}

#txtSearch{
    margin: 0;
}

.modal-content{
    padding: 10px;
}

JavaScript

var app = angular.module('myFilterApp', ['ngResource']);

app.controller('myFilterCtrl', ['$scope', function($scope){
    $scope.message = 'Filters';//'My Custom Filter in Action!';
    $scope.companyList = [
        { id:1, name: 'Apple' },
        { id:2, name: 'Samsung' },
        { id:3, name: 'Sony' }
    ];
    $scope.phoneData = [               
        {
            model: 'Note 2',
            color: 'Black and White',
            company: { id:2, name:'Samsung'}
        }, 
        {
            model: 'Iphone 4s',
            color: 'white',
            company: { id:1, name:'Apple'}
        },        
        {
            model: 'Xperia',
            color: 'Gray',
            company: { id:3, name:'Sony'}
        },
        {
            model: 'Iphone 5s',
            color: 'black',
            company: { id:1, name:'Apple'}
        },
        {
            model: 'S5',
            color: 'White',
            company: { id:2, name:'Samsung'}
        },
        {
            model: 'Xperia Part II',
            color: 'Black',
            company: { id:3, name:'Sony'}
        },
        {
            model: 'S4',
            color: 'White',
            company: { id:2, name:'Samsung'}
        }           
    ];
    
    $scope.addItem = function(){ 
        $scope.phoneData.push(
            {
            model: $scope.mdModel, //'new',
            color: $scope.mdColor, //'yellow',
            company: { id:2, name:'Samsung'}
            }      
        );
        $('.bs-example-modal-sm').modal('hide');           
    };
}]);//End of myFilterCtrl

$().ready(function (){
   $('.dropdown-toggle').dropdown();
    
    $('#btnClose').click(function(){
        $('.bs-example-modal-sm').modal('hide');           
    });
    
});