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

Detailed explanation of AngularJS syntax_AngularJS

May 16, 2016 pm 04:18 PM
angularjs grammar

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
                                                                                                                                                                                                   





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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1665
14
PHP Tutorial
1269
29
C# Tutorial
1249
24
How to quickly turn your Python code into an API How to quickly turn your Python code into an API Apr 14, 2023 pm 06:28 PM

When it comes to API development, you may think of DjangoRESTFramework, Flask, and FastAPI. Yes, they can be used to write APIs. However, the framework shared today allows you to convert existing functions into APIs faster. It is Sanic . Introduction to Sanic Sanic[1] is a Python3.7+ web server and web framework designed to improve performance. It allows the use of the async/await syntax added in Python 3.5, which can effectively avoid blocking and improve response speed. Sanic is committed to providing a simple and fast way to create and launch

The latest 5 angularjs tutorials in 2022, from entry to mastery The latest 5 angularjs tutorials in 2022, from entry to mastery Jun 15, 2017 pm 05:50 PM

Javascript is a very unique language. It is unique in terms of the organization of the code, the programming paradigm of the code, and the object-oriented theory. The issue of whether Javascript is an object-oriented language that has been debated for a long time has obviously been There is an answer. However, even though Javascript has been dominant for twenty years, if you want to understand popular frameworks such as jQuery, Angularjs, and even React, just watch the "Black Horse Cloud Classroom JavaScript Advanced Framework Design Video Tutorial".

What are the syntax and structure characteristics of lambda expressions? What are the syntax and structure characteristics of lambda expressions? Apr 25, 2024 pm 01:12 PM

Lambda expression is an anonymous function without a name, and its syntax is: (parameter_list)->expression. They feature anonymity, diversity, currying, and closure. In practical applications, Lambda expressions can be used to define functions concisely, such as the summation function sum_lambda=lambdax,y:x+y, and apply the map() function to the list to perform the summation operation.

Use PHP and AngularJS to build a responsive website to provide a high-quality user experience Use PHP and AngularJS to build a responsive website to provide a high-quality user experience Jun 27, 2023 pm 07:37 PM

In today's information age, websites have become an important tool for people to obtain information and communicate. A responsive website can adapt to various devices and provide users with a high-quality experience, which has become a hot spot in modern website development. This article will introduce how to use PHP and AngularJS to build a responsive website to provide a high-quality user experience. Introduction to PHP PHP is an open source server-side programming language ideal for web development. PHP has many advantages, such as easy to learn, cross-platform, rich tool library, development efficiency

New type alias syntax in PHP8.0 New type alias syntax in PHP8.0 May 14, 2023 pm 02:21 PM

With the release of PHP 8.0, a new type alias syntax has been added, making it easier to use custom types. In this article, we'll take a closer look at this new syntax and its impact on developers. What is a type alias? In PHP, a type alias is essentially a variable that references the name of another type. This variable can be used like any other type and declared anywhere in the code. The main function of this syntax is to define custom aliases for commonly used types, making the code easier to read and understand.

Parent class calling syntax in PHP8.0 Parent class calling syntax in PHP8.0 May 14, 2023 pm 01:00 PM

PHP is a server-side scripting language widely used in Web development, and PHP8.0 version introduces a new parent class calling syntax to make object-oriented programming more convenient and concise. In PHP, we can create a parent class and one or more subclasses through inheritance. Subclasses can inherit the properties and methods of the parent class, and can modify or extend their functionality by overriding the methods of the parent class. In ordinary PHP inheritance, if we want to call the method of the parent class in the subclass, we need to use the parent keyword to refer to the parent

The connection and difference between Go language and JS The connection and difference between Go language and JS Mar 29, 2024 am 11:15 AM

The connection and difference between Go language and JS Go language (also known as Golang) and JavaScript (JS) are currently popular programming languages. They are related in some aspects and have obvious differences in other aspects. This article will explore the connections and differences between the Go language and JavaScript, and provide specific code examples to help readers better understand these two programming languages. Connection: Both Go language and JavaScript are cross-platform and can run on different operating systems.

What is the difference between C and C++? What is the difference between C and C++? Aug 29, 2023 pm 11:53 PM

The C programming language C is a general-purpose, high-level language originally developed by Dennis M. Ritchie at Bell Labs to develop the UNIX operating system. C was first implemented in 1972 on the DECPDP-11 computer. In 1978, Brian Kernighan and Dennis Ritchie produced the first publicly available description of C, now known as the K&R standard. The UNIX operating system, C compiler, and almost all UNIX applications are written in C. For various reasons, C language has now become a widely used professional language. It is a structured language that is easy to learn, it produces efficient programs, it can handle low-level activities, and it can run on a variety of computers.

See all articles