Skip to main content

Posts

Showing posts with the label angularjs filter directive

AngularJs Filter Example Fiddles [How To Search]

In this post, I am going to share the demo example for “ Filter Array Object ” Example using “ TextBox ” in Angular 1.5. In the below example, I have a “ Products Object ” and render on the “ Table Grid ” and after that filter product grid using the Search textbox . Stayed Informed – Live demo Example [fiddles and plunker] The Example as, JavaScript Code, <script> angular.element( document ).ready( function () { var app = angular.module( 'myApp' , []); app.controller( 'myCtrl' , [ '$scope' , 'store' , function ($scope, store) { $scope.search = '' ; $scope.products = []; $scope.products = store.getProducts(); $scope.filterProductsByCategory = function (category) { $scope.search = category; }; }]); // fake service, substitute with your server call ($http) app.factory( 'store' , function () { var products = [{ ...

What are filters in AngularJs?

The AngularJs Filters are used to display or modify the live data as per your filter text. We can write the filter expression using the pipe (|) character. i.e. {{ yourData| filterTypes }} There are different types of filter which as given below. 1. Uppercase Filter                                     click for live demo on punker 2. Lowercase Filter 3. Currency Filter 4. OrderBy Filter 5. Filter Uppercase Filter : This is used to convert a input text to uppercase. 1 2 3 4 5 ///The Uppercase angular Filter First name:<input type= "text" ng-model= "employee.firstName" > Last name: <input type= "text" ng-model= "employee.lastName" > Display Upper Case: {{employee.fullName() | uppercase}} ///The Uppercase angular Filter First name:<input type="text" ng-model="employee.firstName"> Last name: <input type="text" ng-model="employee....