Angular Common ng instruction detailed

detailed angular ng built-in instructionsWe are in turn from the use of frequency high to low, the importance of the size to explain the various instructions.


1, Ng-repeat 1.1 General Usage

<ul>
    <li ng-repeat= ' char in 
   [{' Alphabet ': ' K '},
    {' Alphabet ': ' A '},
    {' Alphabet ': ' V '},
    {' Alphabet ': ' L '},
    {' Alphabet ': ' E '},
    {' Alphabet ': ' Z '}] ' >
	{{Char.alphabet}}}
   </li>
</ul>

This is a sample program for presentation. In real code development, we typically declare a variable to store the data that needs to be repeat. For example:
var chars= [{' Alphabet ': ' K '},{' alphabet ': ' A '},{' alphabet ': ' V '},{' alphabet ': ' L '}, {' Alphabet ': ' E '}, {' Alphabet ': ' Z '}];
Then write this in the HTML file:

<ul>
    <li ng-repeat= "char in chars" >
	{{char.alphabet}}
   </li>
</ul>

Here char is equivalent to a cyclic variable, similar to the iterator inside C + +. Directly is a set of data within the chars array object. Similar to general data binding, direct data access is possible.
1.2 Advanced UsageNow we're going to use what's in the Ng-repeat: $index $first $middle $last

<ul>
    <li ng-repeat= "char in chars" >
	{{$index}} {{Char.alphabet}}
   </li>
</ul >

In the HTML can be used directly, through this plus ng-class or ng-style instructions can achieve the table Tanchi even the background color alternately appear.
In addition, the repeat is traversed by a unique ID that is hashed out of the content, and if you have multiple sets of data, you can use the index to traverse it.

<ul>
    <li ng-repeat= "char in chars track by $index" >
	{char.alphabet}}
   </li>
</ Ul>

2, Ng-clickThis is a very common angular Click event entry, can be used with other instructions, such as ng-repeat, you can achieve some relatively simple functions.

<ul>
    <li ng-repeat= "char in chars" >
	<a ng-click= "vote ($index)" >{{char.alphabet}}<a >
   </li>
</ul>

This allows you to directly assign an array to the index incoming function, or you can pass in any variable that has already been declared in scope.
3, Ng-classThis is a very cool built-in instruction, through which you can realize the freedom to transform the CSS class by declaring variables within scope, and you only need to move the finger to change the contents of the variable:

<style>
    red {background-color:red;}
    . blue {background-color:blue;}
</style>

<div ng-controller= "Curtimecontroller" >
    <button ng-click= "Getcurrentsecond ()" >get time!</button>
    <p ng-class= "{red:x%2==0,blue:x%2!=0}" >number is: {{x}}</p>
</div>
controller (' Curtimecontroller ', function ($scope) {
    $scope. Getcurrentsecond = function () {
        $scope. x = new Date (). getseconds ();}
    ;
})  

4, Ng-styleNg-style is used to control the values of various attributes within your specific CSS class. There are basically two ways to achieve this: method one:

<div ng-style= "{' font-size ': ' {fontcolor}}px '}" >hello world!!! </div>

<!--declare code within scope-->
$scope. fontcolor=30;

Method Two:

<div ng-style= "fontcolor" >hello world!!! </div>

<!--declare code within scope-->
$scope. fontcolor={' font-size ': ' 30px '};

5, ng-checkedNg-checked, as the name suggests, is for those components that have checked attributes, such as a checkbox, to bind a variable, and if True is checked, false or unchecked.

<input type= "checkbox" ng-checked= "Someproperty" ng-init= " 
Someproperty = True" ng-model= "Someproperty" >

The code is very simple, but I would like to remind you that this binding is a single binding. That is, if the Someproperty initial declaration value is true, and the property is bound with ng-checked, how do you click on the checkbox on the page, the Someproperty value is constant to true. Unless you manually change the value of the Someproperty to false in scope, the corresponding checkbox appears unchecked on the browser. So how to solve this problem. Forgive my stupidity, I did not see any other good solution, the only way is to the checkbox to bind the click event, manually modify the value of the variable.

In addition to the above instructions, others such as Ng-if, Ng-show, NG-SRC, Ng-href are some of the things that read, very obvious. Here is no longer to repeat.