AngularJs自学笔记(2)
AngularJS 指令 AngularJS 指令是以 ng 作为前缀的 HTML 属性 div ng-app = "" ng-init = "firstName='John'" p 姓名为 span ng-bind = "firstName" / span / p / div 比如上面的ng-app ng-bind ng-init都是AngularJS 指令 ng-app ng-bind 用来将 span 的inn
AngularJS 指令
AngularJS 指令是以 ng 作为前缀的 HTML 属性
1 2 3 4 5 |
|
比如上面的ng-app ng-bind ng-init都是AngularJS 指令
ng-app
ng-bind用来将<span></span>
的innerHTML的数值进行绑定,让span内的value值变为firstName变量中的值
这里需要注意的是用ng-bind与用表达式来进行数据绑定有一定的区别,例如:
1 2 |
|
ng-bind的方式是当AngularJS对数据渲染完毕后才会显示的,而表达式的方式就算AngularJS没有对这个变量渲染完毕也是会有可能显示的(就是说会直接在页面上显示字符串“{{ firstName }}”)
ng-init用来初始化AngularJS程序的变量(很少用)
1 |
|
ng-model 用来将input中的value的值与AngularJS中的变量进行绑定,这里是与变量quantity进行了绑定
ng-repeat
例如:
1 2 3 4 5 6 7 8 |
|
结果如下:
ng-controller 用来创建一个控制器,具体使用参照下面写的控制器部分
还有许多ng指令,后续学到可以在这里补充
AngularJS 表达式
AngularJS 表达式写在双大括号内,其表达式的内容和形式与Javascript是一致的,它们可以包含文字、运算符和变量
1 2 3 4 5 6 7 8 9 10 11 12 |
|
结果如下:
AngularJS对象
其和Javascript创建对象是一样的
1 2 3 4 5 |
|
上面这些东西都是一些基本的内容,基本上与JS差不多,当然现在可能不够全面,后续如果有新的内容再回来补充。
AngularJS控制器
首先,先来一段代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
运行结果如下:
这里直接说说我对这个控制器的理解吧,其实他就是一个简单的类的创建,对应着JAVA来看,ng-controller="personController"
就对应着JAVA中创建了一个名字为personController的类,而下面以这个类的名字来命名的一个函数就是这个类对应的构造函数,$scope
可以是看做JAVA中的this,而$scope.person = {....}
则是为这个personController添加了一个名为person的属性,这里,这个person属性是一个对象属性,其也有两个属性firstName和lastName而两个input域里面的值也对其person属性中的这两个属性进行了绑定,其实换做Java代码可以看成这样
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
当然,函数也是可以作为对象的属性的
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
这种就相当于
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
控制器也是可以有方法的
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
这里就相当于
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
所以目前简单看起来,AngularJs的控制器可以把它当做一个Java的类来看待
AngularJS过滤器
AngularJS过滤器可以用来转换数据,其可以通过一个”|”管道字符添加到表达式或者指令的后面来将数据进行转换,例如:
1 2 3 |
|
输出结果如下:
1 |
|
可以看到当添加uppercase过滤器之后,输出的字符串都被大写了
还有几种简单的过滤器
lowercase 过滤器 就是将表达式的值变为小写
currency 过滤器 将数值转化为金钱
1 2 3 4 5 6 7 8 |
|
结果:
orderBy 过滤器
1 2 3 4 5 6 7 8 |
|
结果:
1 2 3 4 |
|
这个过滤器对repeat指令中的数组进行了排序,并且是以country字段为依据进行排序,可以看到输出的结果中Country字段的值就是按由小到大排列而成的
filter 过滤器
其可以过滤出含有输入的字段的值的条目
1 2 3 4 5 6 7 8 9 10 |
|
当我什么都没有输入的时候,输出结果如下
当我输入g之后,输出结果如下
可以看到,输出的结果中就只有那些含有输入字符串的项目了
从这个例子中也可以看出过滤器是可以连续使用的

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to get items using commands in Terraria? 1. What is the command to give items in Terraria? In the Terraria game, giving command to items is a very practical function. Through this command, players can directly obtain the items they need without having to fight monsters or teleport to a certain location. This can greatly save time, improve the efficiency of the game, and allow players to focus more on exploring and building the world. Overall, this feature makes the gaming experience smoother and more enjoyable. 2. How to use Terraria to give item commands 1. Open the game and enter the game interface. 2. Press the "Enter" key on the keyboard to open the chat window. 3. Enter the command format in the chat window: "/give[player name][item ID][item quantity]".

How to delete Xiaohongshu notes? Notes can be edited in the Xiaohongshu APP. Most users don’t know how to delete Xiaohongshu notes. Next, the editor brings users pictures and texts on how to delete Xiaohongshu notes. Tutorial, interested users come and take a look! Xiaohongshu usage tutorial How to delete Xiaohongshu notes 1. First open the Xiaohongshu APP and enter the main page, select [Me] in the lower right corner to enter the special area; 2. Then in the My area, click on the note page shown in the picture below , select the note you want to delete; 3. Enter the note page, click [three dots] in the upper right corner; 4. Finally, the function bar will expand at the bottom, click [Delete] to complete.

Notes deleted from Xiaohongshu cannot be recovered. As a knowledge sharing and shopping platform, Xiaohongshu provides users with the function of recording notes and collecting useful information. According to Xiaohongshu’s official statement, deleted notes cannot be recovered. The Xiaohongshu platform does not provide a dedicated note recovery function. This means that once a note is deleted in Xiaohongshu, whether it is accidentally deleted or for other reasons, it is generally impossible to retrieve the deleted content from the platform. If you encounter special circumstances, you can try to contact Xiaohongshu’s customer service team to see if they can help solve the problem.

As a Xiaohongshu user, we have all encountered the situation where published notes suddenly disappeared, which is undoubtedly confusing and worrying. In this case, what should we do? This article will focus on the topic of "What to do if the notes published by Xiaohongshu are missing" and give you a detailed answer. 1. What should I do if the notes published by Xiaohongshu are missing? First, don't panic. If you find that your notes are missing, staying calm is key and don't panic. This may be caused by platform system failure or operational errors. Checking release records is easy. Just open the Xiaohongshu App and click "Me" → "Publish" → "All Publications" to view your own publishing records. Here you can easily find previously published notes. 3.Repost. If found

Link AppleNotes on iPhone using the Add Link feature. Notes: You can only create links between Apple Notes on iPhone if you have iOS17 installed. Open the Notes app on your iPhone. Now, open the note where you want to add the link. You can also choose to create a new note. Click anywhere on the screen. This will show you a menu. Click the arrow on the right to see the "Add link" option. click it. Now you can type the name of the note or the web page URL. Then, click Done in the upper right corner and the added link will appear in the note. If you want to add a link to a word, just double-click the word to select it, select "Add Link" and press

How to add product links in notes in Xiaohongshu? In the Xiaohongshu app, users can not only browse various contents but also shop, so there is a lot of content about shopping recommendations and good product sharing in this app. If If you are an expert on this app, you can also share some shopping experiences, find merchants for cooperation, add links in notes, etc. Many people are willing to use this app for shopping, because it is not only convenient, but also has many Experts will make some recommendations. You can browse interesting content and see if there are any clothing products that suit you. Let’s take a look at how to add product links to notes! How to add product links to Xiaohongshu Notes Open the app on the desktop of your mobile phone. Click on the app homepage

This article aims to help beginners quickly get started with Vue.js3 and achieve a simple tab switching effect. Vue.js is a popular JavaScript framework that can be used to build reusable components, easily manage the state of your application, and handle user interface interactions. Vue.js3 is the latest version of the framework. Compared with previous versions, it has undergone major changes, but the basic principles have not changed. In this article, we will use Vue.js instructions to implement the tab switching effect, with the purpose of making readers familiar with Vue.js

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".
