The ANGULARJS directive is an extended HTML attribute with a prefix ng-. The ng-app instruction Initializes a ANGULARJS application. The ng-init instruction initializes the application data. The Ng-model directive binds application data to HTML elements.
Angularjs The basic Instructions for learning notes (init, repeat)
<h3> ng-init initialization variables </ h3>
<div ng-init = "name = 'aurora'; age = '18 '">
<p ng-bind = "name + ',' + age"> </ p>
<p> {{name + ',' + age}} </ p>
<p ng-bind = "name"> </ p>
<p ng-bind = "age"> </ p>
</ div>
<h3> ng-init initialization object </ h3>
<div ng-init = "hero = {name: 'aurora', role: 'sup', line: 'No matter the wind or rain, the sun rises as usual'}">
<p ng-bind = "hero.name + ',' + hero.role + ',' + hero.line"> </ p>
<p ng-bind = "hero.name"> </ p>
<p ng-bind = "hero.role"> </ p>
<p ng-bind = "hero.line"> </ p>
</ div>
<h3> ng-init initialization array </ h3>
<div ng-init = "heros = ['The Goddess of Dawn', 'Fallen Angel', 'Soullock Warden']">
<p ng-bind = "heros [0] + ',' + heros [1] + ',' + heros [2]"> </ p>
<p ng-bind = "heros [0]"> </ p>
<p ng-bind = "heros [1]"> </ p>
<p ng-bind = "heros [2]"> </ p>
</ div>
<h3> ng-controller controller </ h3>
<div ng-controller = "contr-2">
First Name: <input type = "text"
ng-model = "firstName">
Last Name: <input type = "text"
ng-model = "lastName">
Full Name: <span> {{firstName + ","
+ lastName}} </ span>
Full Name: <span ng-bind = "firstName + ',' + lastName"> </ span>
</ div>
<h3> ng-repeat iterates through non-repeated collections </ h3>
<div ng-init = "names = [1,2,3]">
<ul>
<li ng-repeat = "x in names">
{{x}}
</ li>
</ ul>
</ div>
<h3> ng-repeat iterate over the repeated collection </ h3>
<div ng-init = "number = [1,2,2,3]">
<ul>
<li ng-repeat = "x in number track by $ index">
{{x}}
</ li>
</ ul>
</ div>
<h3> ng-repeat iterate over objects </ h3>
<div ng-controller = "contr-3">
<ul>
<li ng-repeat = "(key, value) in object track by $ index">
{{key + ":" + value}}
</ li>
</ ul>
</ div>
<h3> ng-repeat iterate through the objects (in the original order) </ h3>
<div ng-controller = "contr-4">
<ul ng-repeat = "obj in objs">
<li ng-repeat = "(key, value) in obj">
{{key + ":" + value}}
</ li>
</ ul>
</ div>
<h3> ng-repeat traversal object (details of attributes) </ h3>
<table ng-controller = "contr-5">
<tr ng-repeat = "(key, value) in objs">
<td> Student ID:
<span ng-bind = "$ index"> </ span>
</ td>
<td>
<span ng-bind = "key"> </ span>:
<span ng-bind = "value"> </ span>
</ td>
<td> Is it odd?
<span ng-bind = "$ odd"> </ span>
</ td>
<td> Is it even?
<span ng-bind = "$ even"> </ span>
</ td>
<td> The ranking is the boss?
<span ng-bind = "$ first"> </ span>
</ td>
<td> Minimum ranking?
<span ng-bind = "$ last"> </ span>
</ td>
<td> In the middle of the ranking?
<span ng-bind = "$ middle"> </ span>
</ td>
</ tr>
</ table>
<h3> ng-repeat start / end </ h3>
<div ng-controller = "contr-6">
<div ng-repeat-start = "(key, value) in objs">
<p> Student ID:
<span ng-bind = "$ index"> </ span>
</ p>
<p>
<span ng-bind = "key"> </ span>:
<span ng-bind = "value"> </ span>
</ p>
</ div>
<div ng-repeat-end> </ div>
</ div>
The above mentioned above is the entire content of this article, I hope you can enjoy.
