Detailed explanation of AngularJS syntax_AngularJS

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:

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:

//ng-submit
Starting:
Recommendation: {{funding.needed}}
                                                                                                                                                                                                                                                        Fund my startup!

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

复制代码 代码如下:

   
   
   


   

        Starting:
        Recommendation: {{funding.needed}}
        Fund my startup!
        Reset
   

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

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>

Toggle Menu

• 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}}

Error
Warning

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