AngularJS - Basic

Filters

by Ryan Morris

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container" ng-app="myApp">
    
    <div ng-controller="MainCtrl">
        
        <h1 id="h1">Filters!</h1>
        
        <h3>Formatting Filters</h3>
        
        <p>uppercase: {{"My String" | uppercase}}</p>
        <p>lowercase: {{"My String" | lowercase}}</p>
        <p>number: {{5.3523523 | number:2}}</p>
        <p>currency: {{5.3253235 | currency}}</p>
        <p>json: {{jsonExample | json}}</p>
        
        <p>date: {{dateExample | date}}</p>
        <p>date: {{timestampExample | date:'short'}}</p>
        <p>date: {{timestampExample | date:'yyyy'}}</p>
        
        <h3>Array filters</h3>
        
        <h4>limitTo</h4>
        
        <select ng-model="orderField">
            <option value="name">Name</option>
            <option value="urgent">Urgent</option>
            <option value="category">Category</option>
        </select>
        <ul>
            <li 
                ng-repeat="item in items | limitTo: 3 | orderBy:orderField:false"                 
                ng-class="item.urgent ? 'urgent' : null"
            >
                {{item.name}} ({{item.category}})
            </li>
        </ul>
        
        <h4>filter</h4>
        
        <input ng-model="itemFilter" />
        
        <!-- Filter by a string, "filter: 'string'" -->
        <!-- Filter by a variable, any value in the object, "filter: itemFilter" -->
        <!-- Filter by a specific property value using an object, "filter:{name: itemFilter}" -->
        <!-- Filter by a function, "filter:isUrgent" -->
        <ul>
            <li 
                ng-repeat="item in items | filter:'One'"                 
                ng-class="item.urgent ? 'urgent' : null"
            >
       ...

CSS

li.urgent{
    color:red;
}

JavaScript

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

myApp.controller('MainCtrl', ['$scope', '$filter', 'numberFilter', function($scope, $filter, numberFilter) {
     
    result.html("hi");
    $scope.jsonExample = {
        key: "value",
        arr: [
            0,1,2,3,4    
        ]
    };
    
    $scope.dateExample = new Date();
    $scope.timestampExample = Date.now();
    
    $scope.items = [
        {name: "One", urgent: false, category: "Rad"},
        {name: "Two", urgent: true, category: "Boring"},
        {name: "Three", urgent: false, category: "Boring"},
        {name: "Four", urgent: true, category: "Boring"},
        {name: "Five", urgent: true, category: "Lame"},
        {name: "Six", urgent: false, category: "Super"},
        {name: "Seven", urgent: false, category: "Super"},
        {name: "Eight", urgent: true, category: "Normal"},
        {name: "Nine", urgent: false, category: "Normal"},
        {name: "Ten", urgent: true, category: "Normal"}
    ];
    
    // a function used by our "filter" filter
    $scope.isUrgent = function(item) {
        // false will remove the item from the list
        return item.urgent;
    }
    
    // and... yeah, you can use a filter in your controller!
    // include the dependency (there are two options)
    
    // use $filter
    console.log($filter('number')(5.234234, 2));
    
    // use the filter as a function, filterName(item, arg1, arg2,...)
    console.log(numberFilter(5.234234, 2));
    
}]);

myApp.filter('capitalize', [function() {
   
    return function(str) {
        
        return str.charAt(0).toUpperCase() + str.slice(1);
        
    }
    
}]);
/*
myApp.filter('capitalize', [function() {
    
    var cap = function(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);   
    }
    
    return function(data) {
        
        if (angular.isArray(data)) {
            // what to do?
        }
        
        return cap(data);
    }
    
}]);
*/