AngularJS - Part 3

Before continuing this, please refer Angular JS- Part 2

AngularJS – Controllers

In Angular, a Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope.

When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.
If the controller has been attached using the controller as syntax then the controller instance will be assigned to a property on the new scope.

<div ng-app = "" ng-controller = "studentController">

   ...

</div>

AngularJS – Filters

A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter.
The underlying API is the filterProvider.

Using filters in view templates

Filters can be applied to expressions in view templates using the following syntax:

{{ expression | filter }}

Following is the list of commonly used filters:-

Sr.No.	Name	Description
1	uppercase	converts a text to upper case text.
2	lowercase	converts a text to lower case text.
3	currency	formats text in a currency format.
4	filter	filter the array to a subset of it based on provided criteria.
5	orderby	orders the array based on provided criteria.

uppercase filter

Add uppercase filter to an expression using pipe character. Here we've added uppercase filter to print student name in all capital letters.

Enter first name:<input type = "text" ng-model = "student.firstName">

Enter last name: <input type = "text" ng-model = "student.lastName">

Name in Upper Case: {{student.fullName() | uppercase}}

 

lowercase filter

Add lowercase filter to an expression using pipe character. Here we've added lowercase filter to print student name in all lowercase letters.

Enter first name:<input type = "text" ng-model = "student.firstName">

Enter last name: <input type = "text" ng-model = "student.lastName">

Name in Upper Case: {{student.fullName() | lowercase}}

 

currency filter

Add currency filter to an expression returning number using pipe character. Here we've added currency filter to print fees using currency format.

Enter fees: <input type = "text" ng-model = "student.fees">

fees: {{student.fees | currency}}

 

filter filter

To display only required subjects, we've used subjectName as filter.

Enter subject: <input type = "text" ng-model = "subjectName">

Subject:

<ul>

  <li ng-repeat = "subject in student.subjects | filter: subjectName">

     {{ subject.name + ', marks:' + subject.marks }}

  </li>

</ul>

 

orderby filter

To order subjects by marks, we've used orderBy marks.

Subject:

<ul>

  <li ng-repeat = "subject in student.subjects | orderBy:'marks'">

     {{ subject.name + ', marks:' + subject.marks }}

  </li>

</ul>

 

AngularJS – Tables

Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily. Following example states the use of ng-repeat directive to draw a table.

<table>

   <tr>

      <th>Name</th>

      <th>Marks</th>

   </tr>

   <tr ng-repeat = "subject in student.subjects">

      <td>{{ subject.name }}</td>

      <td>{{ subject.marks }}</td>

   </tr>

</table>

 <<Angular JS- Part 2                                    Angular JS- Part 4>>