AngularJS HTML DOM

AngularJS HTML DOM

AngularJS provides instructions for binding application data to attributes of html dom elements. Today, we will introduce some instructions related to html dom operations in AngularJS.

Ng-options

In AngularJS, we can use the ng-option command to create a drop-down list. list items are output cyclically through objects and arrays. The sample code is as follows:

<Script src = "js/angular. min. js "> </script> <script type =" text/javascript "> angular. module ("myApp", []). controller ("myCtrl", function ($ scope) {$ scope. items = ["red", "blue", "green"] ;}); </script>

This will display a drop-down list. Friends who have read the previous blog should know that there isng-repeatThe command is used to repeatedly create elements, so we useng-repeatTo achieve the same effect, the Code is as follows:

<Script src = "js/angular. min. js "> </script> <script type =" text/javascript "> angular. module ("myApp", []). controller ("myCtrl", function ($ scope) {$ scope. items = ["red", "blue", "green"] ;}); </script> {{item}}

This code can also display a drop-down selection box. Which of the two is better?
ng-repeatThe command uses an array to loop through HTML code to create a drop-down list,ng-optionsThis command is more suitable for creating drop-down lists.ng-optionsData can be objects, whileng-repeatIs a string ., When the data used to create a drop-down selection box is an object,ng-optionsThe advantage is especially obvious. The following code demonstrates how:

<Script src = "js/angular. min. js "> </script> <script type =" text/javascript "> angular. module ("myApp", []). controller ("myCtrl", function ($ scope) {$ scope. items = {red: {r: 255, g: 0, B: 0}, green: {r: 0, g: 255, B: 0}, blue: {r: 0, g: 0, B: 255 }}); </script> {{selectColor}}Ng-disabled

ng-disabledCommand to directly bind application data to the disabled attribute of HTML.

Sample Code:

<Script src = "js/angular. min. js "> </script> <script type =" text/javascript "> angular. module ("myApp", []). controller ("myCtrl", function ($ scope) {}); </script> Ng-show and ng-hide

ng-showCommand to hide or display an HTML element.ng-hideCommands are also used to hide or display HTML elements. Andng-showOn the contrary.

Sample Code:

<Script src = "js/angular. min. js "> </script> <script type =" text/javascript "> angular. module ("myApp", []). controller ("myCtrl", function ($ scope) {}); </script>