Home > Web Front-end > JS Tutorial > Detailed explanation of AngularJS syntax_AngularJS

Detailed explanation of AngularJS syntax_AngularJS

WBOY
Release: 2016-05-16 16:18:16
Original
1334 people have browsed it

The basic operation process of templates and data is as follows:

User requests application start page
The user's browser initiates an http connection to the server, and then loads the index.html page, which contains the template
Angular is loaded into the page, waits for the page to load, and looks for the ng-app directive, which is used to define the boundaries of the template
Angular traverses the template to find the specified and binding relationships, which will trigger a series of actions: registering listeners, performing some DOM operations, and obtaining initialization data from the server. Finally, the application will start and convert the template into a DOM view
Connect to the server to load other data that needs to be displayed to the user

Show text

One uses the {{}} form, such as {{greeting}} and the second ng-bind="greeting"

Use the first method. Unrendered pages may be seen by users. It is recommended to use the second method for index pages. The remaining pages can use the first method

Form input

Copy code The code is as follows:



Form





Starting: //Call the function when changing
Recommendation: {{funding.needed}}



In some cases, we don’t want to take immediate action as soon as there is a change, but we have to wait. For example:

Copy code The code is as follows:



Form




//ng-submit
Starting:
Recommendation: {{funding.needed}}
                                                                                                                                                                                                                                                       



非表单提交型的交互,以click为例

复制代码 代码如下:



    表单
   
   


   

        Starting:
        Recommendation: {{funding.needed}}
       
       
   



列表、表格以及其他迭代型元素

ng-repeat会通过$index返回当前引用的元素序号。 示例代码如下:

复制代码 代码如下:



    表单
   
   


   
       
           
           
           
       
   
{{$index 1}}{{student.name}}{{student.score}}



隐藏与显示
ng-show和ng-hide功能是等价的,但是运行效果正好相反。

复制代码 代码如下:




<script><br> function DeathrayMenuController($scope) {<br> $scope.menuState = {show:false};//Change to menuState.show = false here and the effect will not be displayed. In the future, it is better to declare variables inside {}<br> $scope.toggleMenu = function() {<br> $scope.menuState.show = !$scope.menuState.show;<br> };<br> }<br> </script>





  • Stun

  • Disintegrate

  • Erase from history





css classes and styles

Both ng-class and ng-style can accept an expression. The result of the expression execution may be one of the following values:

A string representing css class names, separated by spaces
css class name array
Mapping of css class name to boolean value
The code example is as follows:

Copy code The code is as follows:





<script><br> function HeaderController($scope) {<br> $scope.isError = false;<br> $scope.isWarning = false; <p> $scope.showError = function() {<br>           $scope.messageText = "Error!!!!"<br>           $scope.isError = true;<br>           $scope.isWarning = false;<br> }</p> <p> $scope.showWarning = function() {<br>           $scope.messageText = "Warning!!!"<br>           $scope.isWarning = true;<br>           $scope.isError = true;<br> }<br> }<br> </script>



{{messageText}}






Mapping of css class names to Boolean values
The sample code is as follows:

Copy code The code is as follows:





<script><br> Function Restaurant($scope) {<br> $scope.list = [{name:"The Handsome",cuisine:"BBQ"},{name:"Green",cuisine:"Salads"},{name:"House",cuisine:'Seafood'}]; <p> $scope.selectRestaurant = function(row) {<br>                  $scope.selectedRow = row;<br> }<br> }<br> </script>



//Mapping of css class names to Boolean values , when the value of the model attribute selectedRow is equal to $index in ng-repeat, the selected style will be set to that row
                                                                                                                                                                                                   





Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template