Search within TutorialsPark

AngularJS : First Application - Filters, Ajax

Learn how to build your first application using AngularJS, and apply some Advanced Features

AngularJS : First Application - Applying Filters to Data Model

There are times when the format of data stored in the application is different from what we want the user to see, eg text in lowercase, large decimal points etc.

AngularJS Filters are used to filter the format of data to be displayed in the view, filters find a lot of application in the data-binding expressions, but can also be used with controllers, services, directives.

Filters can be learn in great detail in further sections with lots of application, but for now we give you a demo of using filter within our first application.

AngularJS First Application : Using Filters on Data Model

In the Last Part we could prepare views for the user using behaviours, but behaviours lack resuability, hence filters are used more commonly to create views.

In the demo , we have used two filters filter and orderBy.

filter : It selects items with the value of status as false

action : The orderBy filter is used to sort data based on the value of bill property.

Example: AngularJS Bi-directional Binding using Checkbox

Give it a TRY! » Note:When a new bills is added it is not displayed, because the default value is false, and filter allows only true

AngularJS First Application : Getting Data using Ajax and JSON

Instead of having a hard coded datamodel, we have a options of sourcing it from outside by using a JSON file(s) to hold data and getting it via Ajax request.

In the demo, we create file called as demoJSON.json to hold the data model for the application, the method run is used to execute the function within once AngularJS

The use of method get results in promise , this object ensures that work will get completed in future, and use of method success on promise object ensures that function gets invoked on completion of Ajax Request, and JSON data recieved is parsed to create JavaScript object.

Example: Angular JS First Application Getting Data using JSON and Ajax

Give it a TRY! » Note: The protocol http is used to make ajax calls.