Angular Ng-Click Directive

Hi

Today we explore ng-click directive of Angular JS.

Before we proceed with lets, design a page with technology names and their likes and dislikes as shown below.

ngclickoutput

This can be achieved from the below markup.

ngclickmarkup

Now build the model which has data and functions which increases count of Likes and dislikes of technologies as shown below.

ngclickmodel

That’s all for the day.

Advertisements

Angular NG-Repeat

Hi,

Today we discuss short about angular ng-repeat directive. Below is my page which would like to display data in tabular format which can be achieved by using markup table attributes with thead,tbody etc. with angular ng-app, ng-repeat directives.

re

Now look at ngrepeat.js is the script file which has module,controller and is responsible for population of data on html page. Now script file looks as  below:

ngre

The output of the following lines of code could be as below:

outre

As you can see there is no borders and lines defined in above tabular format which can be achieved by using style sheets and could be illustrated in later posts.

Thats all for the day.

Happy coding..:)

 

 

My Angular 1

Hi,
My first Angular Program which includes :

Basic directive for angularjs to execute is ng-app.  Angularjs looks for ng-app directive and then proceed with execution else will not pickup the code and expression does not gets evaluated  that is handled by browser considering as plain text.

In Angular {{———–}} is referred as expression.

Angular is not responsible in div which is outside scope of ng-app.

If angular ng-app is appended in body then this is applicable to the entire  body of page.

8

Consider the same above program where there are two divs elements and first bind with Angular and other is independent whose expression value is not evaluated and displays the same.

10

The output of the above program is shown below:

1

Now when ng-app directive is used in body element of page then all divs are effective under ng-app directive.

Now lets look on arrays in angular.

11

The output of this program is as follows:

3

in the last div we specified 1==2 expression for which Angular is returning false.

Thats it for the day