AngularJS学习笔记
发布日期:2022-03-02 13:23:59 浏览次数:37 分类:技术文章

本文共 8503 字,大约阅读时间需要 28 分钟。

@{    ViewBag.Title = "AngularJS";    Layout = "~/Views/Shared/_LayoutPop.cshtml";}

AngularJS 表达式

名字 :

Hello {
{
name}}

姓名为

我的第一个表达式: {

{ 5 + 5 }}

名:
姓:
姓名: {
{
firstName + " " + lastName}}

总价: {

{ quantity * cost }}

总价:

姓为 {

{ person.lastName }}

第4个数字: {

{ points[3] }}

在输入框中尝试输入:

姓名:

你输入的为: {

{ firstName }}

价格计算器

数量:
价格:

总价: {

{ quantity * price }}

使用 ng-repeat 来循环数组

  • {
    { x }}

循环对象:

  • {
    { x.name + ', ' + x.country }}

创建自定义的指令

restrict 值可以是以下几种: E 作为元素名使用, A 作为属性使用, C 作为类名使用, M 作为注释使用, restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

ng-model 指令

名字:

你输入了:{

{
name}}

验证用户输入

Email:
不是一个合法的邮箱地址

状态

Valid: {

{
myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。

Dirty: {

{
myForm.myAddress.$dirty}} (如果值改变则为 true)。

Touched: {

{
myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。

AngularJS Scope(作用域)、AngularJS 控制器

{
{
fullName()}}

姓名为 {

{ lastName | uppercase }}

//uppercase 过滤器将字符串格式化为大写:

AngularJS 过滤器

数量:
价格:

总价 = {

{ (quantity * price) | currency }}

添加排序

循环对象:

  • {
    { x.name + ', ' + x.country }}

添加排序

输入过滤:

  • {
    { (x.name | uppercase) + ', ' + x.country }}

AngularJS 服务(Service)

当前页面的url:

{
{
myCtrl6}}

该实例使用了内建的 $location 服务获取当前页面的 URL。

$timeout 服务

两秒后显示信息:

{
{
myHeader}}

$timeout 访问在规定的毫秒数后执行指定函数。

$interval 服务

现在时间是:

{
{
theTime}}

$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。

自定义服务

255 的16进制是:

{
{
hex}}

$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。

在过滤器中使用服务:

{
{255 | myFormat}}

AngularJS $http

  • {
    { x.CustomerCode + ', ' + x.MiscImportLoadAmount }}

使用 ng-options 创建选择框

你选择的是: {
{
selectedSite}}

使用 ng-repeat 创建选择框

你选择的是: {
{
selectedSite}}

ng-repeat 有局限性,选择的值是一个字符串:

你选择的是:site= {
{
selectedSite.site}},url= {
{
selectedSite.url}}

使用 ng-options 指令,选择的值是一个对象

选择一辆车:

你选择的是: {
{
selectedCar.brand}}

模型: {
{
selectedCar.model}}

颜色: {
{
selectedCar.color}}

注意选中的值是一个对象。

AngularJS 表格

序号 销售核算单号 PO1
{ { $index + 1 }} { { $index + 1 }} { { x.OrderNumber }} { { x.OrderNumber }} { { x.POID | uppercase}} { { x.POID }}

AngularJS HTML DOM

按钮

状态:{

{ mySwitch }}

ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。

ng-show

我是可见的1。

我是不可见的。

ng-show 指令根据 value 的值来显示(隐藏)HTML 元素。

我是可见的2。

ng-hide

我是不可见的。

我是可见的3。

AngularJS 事件

ng-click 指令

{

{ count }}

名:

姓:
姓名: {
{
firstName + " " + lastName}}

AngularJS 表单

First Name:
Last Name:

form = {

{
user }}

master = {

{
master}}

验证实例

用户名:

用户名是必须的。

邮箱:

邮箱是必须的。 非法的邮箱地址。

{

{ x1 }}

{

{ x2 }}

angular.lowercase()、angular.uppercase()、angular.isString()、angular.isNumber()

使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:

AngularJS 依赖注入

输入一个数字:

结果: {

{
result}}

我喜欢的网站

菜鸟教程

欢迎访问菜鸟教程

Google

欢迎访问Google

淘宝

欢迎访问淘宝

切换

选择不同选项显示对应的值。


ng-switch 指令根据当前的值显示或隐藏对应部分。

{

{
myTxt}}

以下实例演示了表单提交后 AngularJS 执行行。

转载地址:https://blog.csdn.net/amusement1992/article/details/53008611 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:20120825
下一篇:PHP GD 库 使用 imagettftext 向图像写入文本时 文本包含命名实体 如何转 UTF-8

发表评论

最新留言

关注你微信了!
[***.104.42.241]2024年03月27日 02时14分01秒