The beast's angular Api learning, translating and understanding-Nglist, Ngrepeat, ngmodeloptions

The beast's Ng API learns--nglist, Ngrepeat, ngmodeloptions

Nglist

Converts between delimited strings and string arrays of text input, either as a fixed string delimiter (the default comma) or as a regular expression.

Format: ng-list= "value"

Value: The expression separates the string by this value.

Using code:

<div ng-app= "Demo" >

<div ng-controller= "Democtrl" >

<input ng-model= "list" ng-list= "." >

{{List}}

</div>

</div>

<script>

Angular.module ("Demo", [])

. Controller ("Democtrl", ["$scope", function ($scope) {

$scope. List = ["A", "B", "C"];

}])

</script>

After running the above code, you will find that using NG to add tags tags will be the exception of the simple, you just need to put a nglist on input, and then you specify the separation rules input tags can, in JS corresponding model will get this array (such as < Input ng-list= "-" ng-model= "list"/>, then you enter "Q-w-e-r-t-y-u" in input, the corresponding $scope.list in JS will be

["Q", "W", "E", "R", "T", "Y", "U"]).

Ngrepeat

This instruction instantiates a module for each item in the collection. Each module has its own scope, and the given loop variable is set to the current item, $index is their index.

Format: ng-repeat= "value"

Value: the array being looped.

$index: Current index.

$first: The first item in the Loop array.

$middle: The middle item between the $first and the $last.

$last: The last item in the Loop array.

$even: An even entry for the loop array.

$odd: An odd number of looping arrays.

Using code:

<div ng-app= "Demo" >

<div ng-controller= "Democtrl" >

<ol>

<li ng-repeat= "I in List" >{{i}}</li>

</ol>

</div>

</div>

<script>

Angular.module ("Demo", [])

. Controller ("Democtrl", ["$scope", function ($scope) {

$scope. List = ["A", "B", "C"];

}])

</script>

Tips for using:

Track by removing duplicates

Ngrepeatstart and Ngrepeatend perform an area cycle.

The little buddy who used jquery has been ngrepeat, and will never have to loop an array and then give the DOM append HTML string or HTML () a large string of HTML strings to create the list. Ngrepeat will generate the corresponding DOM list based on the array to loop. However, it is important to note that Ngrepeat creates a child scope that inherits from the parent in the same way that it inherits from the stereotype.

Ngmodeloptions

This directive allows adjustments to be made to update the model. You can use this command to specify a series of events that will trigger the update of the model/or a delay to eliminate jitter so that the actual update occurs only when the timer expires. After another change occurs, the timer will be reset.

Format:

Ng-model-options= "{updateon: ' default Blur ', debounce:{' default ': $, ' blur ': 0}}"

Updateon: Specifies that the event should be the input string. You can set up several events using a space-delimited list. There is a special event called default that matches the default event of the control.

Debounce: An integer value that specifies how long the model performs the update. A value of 0 triggers an immediate update. If you provide an object, you can specify a value for each event.

Using code:

<input ng-model= "text" ng-model-options= "{updateon: ' default Blur ', debounce:{' default ': +, ' blur ':}}"/>

This command can be used in input delay search, such as: do a search box, the user entered the time not to search, when the user stopped entering n seconds, and then perform the search, This ensures that no input changes are made in a timely manner (which results in a large number of XMLHttpRequest requests for the page), but the search can be performed automatically without clicking the Search button. Of course, this directive is also very practical in other places.

This is the first day to get here, wash and sleep.

The beast's angular Api learning, translating and understanding-Nglist, Ngrepeat, ngmodeloptions