Home > Developer > Web Develop
One, data loop: special attention to scope
Use the ng-repeat directive.
<div ng-app= "myApp" ng-controller= "Myctrl" > <ul> <li ng-repeat= "x in Names" >{{x}}</li > </ul></div><script>var app = Angular.module (' myApp ', []); App.controller ( function($scope) { $scope. Names=["Golden Horn King", "Silver Horn King", "Red Babe"];}); </script>Two: Angularjs Controller
The 1.AngularJS application is controlled by the controller.
The 2.ng-controller directive defines the application controller.
How to use the controller:
<div ng-app= "MyApp" ng-controller= "Myctrl" > Surname:<input type= "text" ng-model= "Xing" ><br > Name:<input type= "text" ng-model= "Ming" > var app=angular.module ("MyApp", []); App.controller ("Myctrl",function($scope) { $scope. xing= "Sun"; $scope. ming= "Goku"; $scope. AAA=function() { return $scope. xing+ $scope. ming+ "like to eat Bananas"; } }) </script>Now let's analyze this case:
The AngularJS application is defined by Ng-app. The application runs within <div>.
The AngularJS directive is used to define a controller: ng-controller= "Myctrl"
The Myctrl function is a JavaScript function.
AngularJS uses the $scope object to invoke the controller.
In AngularJS, $scope is an Application object (which belongs to the application variables and functions).
The $scope of the controller (equivalent to scope, control range) is used to hold the object of the ANGULARJS model (model).
The controller creates two properties (Xing and Ming) in scope.
The Ng-model directive binds the input domain to the controller's properties (Xing and Ming).
Three, Dom instructions.
1,ng-disabled directive: Directly binds the application data to the disabled property of the HTML.
<body ng-app= "MyApp" ng-controller= "Mctrl" > <input type= "button" value= "Next" ng-disabled= "!mm"/> <input type= "checkbox" ng-model= "mm"/> </body> <script type= "Text/javascript" > var app=angular.module (' MyApp ', []); App.controller (' Mctrl ',function ($scope) {}); </script>2,ng-hide directive (hidden Element)
<body ng-app= "MyApp" ng-controller= "Myctrl" > <input type= "checkbox" ng-model= "mm"/> Hidden <div Ng-hide= "MM" > var app=angular.module (' MyApp ', []); App.controller (' Myctrl ',function ($scope) {}) </script>3,ng-show directive: Displays (hides) HTML elements based on value values, and you can use expressions to evaluate Boolean values (TRUE or false).
<body ng-app= "MyApp" ng-controller= "Myctrl" > <input type= "checkbox" ng-model= "mm"/> Display <div id= "" ng-show= "mm" > var app=angular.module (' MyApp ', []); App.controller (' Myctrl ',function ($scope) {}) </script>4,angularjs Show hidden
(1) The ng-hide instruction is used to set whether the app part is visible.
Ng-hide= "true" setting HTML element is not visible.
Ng-hide= "false" to set the HTML element to be visible.
(2) The Ng-show directive can be used to set whether a part of the app is visible.
Ng-show= "false" to set the HTML element to be invisible.
Ng-show= "true" can be visible to set HTML elements.
Angularjs of the Four
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
