Expressions and Built-in Directives

Angular expressions bind application data to an HTML element using functions such as operators, literals, and variables that are similar to JavaScript. Unlike JavaScript expressions, Angular expressions can be written inside HTML. An Angular expression can be written as {{expression}} or written inside a directive, such as ng-bind=expression.

Common Expressions

1. Bind a basic value: {{value}}

2. Bind a property of an object: {{object.property}}

3. Check for true/false: {{boolean == true}} or {{!boolean}}

ng-show and ng-hide

This directive invokes hide in CSS to show/hide an element. An example:

<div ng-show='truthyValue == true'>
Show this text using ng-show
</div>
<div ng-hide='truthyValue == true'>
Hide this text using ng-hide
</div>

ng-if

With this directive, we can decide whether the DOM will render an element based on an Angular expression. An example:

<div ng-if='truthyValue == true'>
This will be rendered by the DOM if truthyValue == true
</div>

* Difference between ng-if and ng-hide is about HTML rendering. In ng-if, if the expression in false, it will not render at all.

ng-class

This directive will inject a class into a HTML element based on an Angular expression; in other words, it will behave according to the evaluated expression in three ways:

1. String -> string will represent class names. Use space for more than one class.

2. Object -> every key/value pair of the object will be a value/class name. ("truthyvalue": "className")

3. Array -> each element of the array will either be as the type 1 or the type 2.

ng-style

This directive will inject inline CSS into an element. For example:

For this object (scope value):

$scope.manualStyle = {
    'background-color': 'blue'
}

The markup would look like this:

<div ng-style='manualStyle'>
This has a blue background
</div>

Arrays

To display the list use the ng-repeat directive. To filter the list you could add a two-way bound textbox allowing the user to enter text by which to filter. To expand your list add another two-way bound textbox and push that property value to your array of items when the user clicks a button. To remove items you can pass the index of the item to a function that just removes the item from the array. Parameters in the ng-repeat expression allow you to filter and order your list.

No matter what you do to the array with ng-repeat your repeated section of HTML would update accordingly, reflecting each item in the list properly.

ng-repeat

We can iterate through lists of objects using this directive. For example, take this list:

$scope.students = [
{'name': 'Pardis', 'age': '22', 'GPA': '4.0'},
{'name': 'Farbod', 'age': '23', 'GPA': '2.5'},
{'name': 'Giti', 'age': '19', 'GPA': '3.8'}
];

In HTML:

<div ng-repeat="std in students">
Name: {{std.name}}, Age: {{std.age}}, GPA: {{std.GPA}}
</div>

* $index is a built-in variable to ng-repeat that will reference the index value of the item in the array.

* $parent, if used with nested ng-repeats, will get the repeat above it without having to use the variable name of the parent repeat.

Filter

In case we have something like this:

$scope.filterVal = 'Pardis'

And we write this in HTML:

<div ng-repeat="std in students | filter: filterVal">
Name: {{std.name}}, Age: {{std.age}}, GPA: {{std.GPA}} 
</div>

Only object with filterVal in it will render.

If we write this:

<div ng-repeat="std in students | orderBy: 'name'">
Name: {{std.name}}, Age: {{std.age}}, GPA: {{std.GPA}} 
</div>

the list will be shown in a sorted way by name. Furthermore, orderBy: '!Name' will reverse the order.

If you use track by, you will prevent re-rendering already present elements. For example:

<div ng-repeat="std in students | orderBy: 'name' | filter: filterVal track by $index">
Name: {{std.name}}, Age: {{std.age}}, GPA: {{std.GPA}}
</div>

ng-option

This directive allows us to create dynamic <option> lists within a ng-option. For example in this array:

$scope.students = [
{'name': 'Pardis', 'age': '22', 'GPA': '4.0'},
{'name': 'Farbod', 'age': '23', 'GPA': '2.5'},
{'name': 'Giti', 'age': '19', 'GPA': '3.8'}
];

In HTML:

<select ng-options="std.name for std in students" ng-model="selected"></select>

Will generate:

<select ng-model='selected'>
<option value='Pardis'>Pardis</option>
<option value='Farbod'>Farbod</option>
<option value='Giti'>Giti</option>
</select>

And std.name in ng-options will be responsible for what will serve as value in <option>.

Week Three Sample Code

Week One Week Two Week Three Week Four Week Five