AngularJs Expression and AngularJs Filter

Friday, January 29th, 2016 (0 Comment)

1. What is AngularJs Expression ?

AngularJs Expression used in all parts of AngularJs, so the need to master the expression and the way calculations in AngularJs. It is surrounded by symbols {{}}. One variable is initialized from the controller via the $scope is also considered an expression.

AngularJs Expressions essentially similar expressions in JavaScript but also the various points below:

  • If the variables used are empty or undefined, it will generate an error in Javascript. But in AngularJs will ignored.
  • You cannot use conditional expressions, loops or exceptions in AngularJs Expression.
  • Do not declare the function in expression even inside AngularJS ng-init directive.
  • Unable create regular expressions in expression AngularJS.
  • You can use the filter in the expression to format the data before displaying them.

AngularJs Expression ‘s Syntax:

Output:

Example: display some AngularJs Expression

Demo

  • Line 9: using <ng-init> keyword to initialize the initial values

Output:

2. Angularjs Filter?

In AngularJs, a filter provides a data format to display to the user.

AngularJs provide some filter built as: lowercase, date, number, currency, limitTo, orderBy…

Filter’s Syntax:

Output:

Example: display some AngularJs filter

Demo

3. Create private filter function in angularjs

To create a filter, we will add a filter module() on the application and set the filter name in single quotes (‘filter name’). As you can see, we absolutely can name and regulations of the disposal for your filter.

Example: create a filter uppercase function:

Html code:

Demo

  • Line 10: declare obj variable is objController
  • Line 12: show fullname with uppercase function
  • Line 18-22: create private filter function (uppercase function)
  • Line 23-25: create controller to set fullname value

Output:

4. Filter Loop

Filter worked pretty well with loop, the filter syntax for loop is similar to the single object. See sample below:

Demo

  • Line 12-13: get and show list name
  • Line 20-30: create list name in Controller

Output:

5. Filters for loop arguments

Example: we will allow users to filter by conditions under which they desired name by entering parameters

Demo

  • Line 13: using startsWithCustomer function and filter name parameter.
  • Line 32-45: filter function with name parameter

Output:

 

Tags: , ,

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Related Posts

angularjs
Angularjs filter checkbox examples mvc
angularjs
Angularjs listbox examples mvc
angularjs
Angularjs combobox examples mvc
angularjs
Create update delete CRUD in Angularjs MVC

Leave a Reply

Your email address will not be published. Required fields are marked *