草庐IT

对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】

黎燃黎燃 2023-03-28 原文

Angularjs表达式

Angularjs使用表达式将数据绑定到HTML Angularjs表达式使用双括号编写:{表达式}。 angularjs表达式将数据绑定到HTML,类似于ng bind指令。 Angularjs将在写入表达式的位置“输出”数据。 Angularjs表达式与JavaScript表达式非常相似:它们可以包含文本、运算符和变量。 实例{5+5}或{firstname+“”+LastName}}

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app> <p>黎燃表达式{{ 5 + 5 }}</p> </div> </body> </html>

Angularjs数字类似于JavaScript数字:

<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价: {{ quantity * cost }}</p> </div>

使用相同的NG bind实例:

<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价: <span ng-bind="quantity * cost"></span></p> </div>

Angularjs表达式和JavaScript表达式

与JavaScript表达式类似,angularjs表达式可以包含字母、运算符和变量。 与JavaScript表达式不同,angularjs表达式可以用HTML编写。 与JavaScript表达式不同,angularjs表达式不支持条件判断、循环和异常。 与JavaScript表达式不同,angularjs表达式支持过滤器。

Angularjs指令

Angularjs使用称为指令的新属性扩展HTML。 Angularjs通过内置指令向应用程序添加函数。 Angularjs允许自定义指令。 angularjs指令是一个扩展的HTML属性,前缀为ng-。 ng app指令初始化angularjs应用程序。 ng init指令初始化应用程序数据。 ng模型指令将元素值(例如输入字段的值)绑定到应用程序。

<div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入:</p> <p>姓名:<input type="text" ng-model="firstName"></p> <p>你输入的为: {{ firstName }}</p> </div>

ng-app指令告诉angularjs<div>元素是angularjs应用程序的“所有者”。 数据绑定 上面示例中的{firstname}表达式是angularjs数据绑定表达式。 angularjs中的数据绑定将angularjs表达式与angularjs数据同步。 {{firstname}}通过ng model=“firstname”同步。 在下一个示例中,两个文本字段由两个ng模型指令同步:

<div ng-app="" ng-init="quantity=1;price=5"> <h2>价格计算器</h2> 数量: <input type="number" ng-model="quantity"> 价格: <input type="number" ng-model="price"> <p><b>总价:</b> {{ quantity * price }}</p> </div> ng-repeat 指令用在一个对象数组上:

Ng应用程序指令

ng app指令定义angularjs应用程序的根元素。 加载网页时,ng app指令将自动引导(自动初始化)应用程序。 稍后,将了解ng app如何通过值(例如ng app=“mymodule”)连接到代码模块。

<div ng-app="" ng-init="names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}]"> <p>循环对象:</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }} </li> </ul> </div>

Ng初始化指令

ng init指令定义angularjs应用程序的初始值。 通常,不使用ng init。将用控制器或模块替换它。

Ng模型教学

ng模型指令将HTML元素绑定到应用程序数据。 ng模型指令还可以: 为应用程序数据(数字、电子邮件、必填项)提供类型验证。 为应用程序数据提供状态(无效、脏、触摸、错误)。 为HTML元素提供CSS类。 将HTML元素绑定到HTML表单。

Ng重复指令

ng repeat指令为集合(数组)中的每个项克隆一次HTML元素。

创建自定义指令

除了angularjs的内置指令外,我们还可以创建自定义指令。 可以使用。用于添加自定义指令的指令函数。 要调用自定义指令,需要向HTML元素添加自定义指令名称。 驼峰方法用于将指令命名为runoobdirective,但在使用它时需要将其拆分为“-”。Runoob指令:

<body ng-app="myApp"> <runoob-directive></runoob-directive> <script> var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { template : "自定义指令!" }; }); </script> </body> 可以通过以下方式调用指令: 素名 属性 类名 笔记

<runoob-directive></runoob-directive> <div runoob-directive></div> <div class="runoob-directive"></div> <!-- directive: runoob-directive --> 通过添加restrict属性并将值设置为“a”,可以设置指令只能通过属性调用:

var app = angular.module("myApp", []); app.directive("runoobDirective", function() { return { restrict : "A", template : "自定义指令!" }; }); 极限值可以是以下值: E用作元素名称 A用作属性 C用作类名 M用作注释 restrict的默认值是ea,也就是说,可以通过元素名和属性名调用指令。

有关对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】的更多相关文章

  1. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们? - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  2. ruby 正则表达式 - 如何替换字符串中匹配项的第 n 个实例 - 2

    在我的应用程序中,我需要能够找到所有数字子字符串,然后扫描每个子字符串,找到第一个匹配范围(例如5到15之间)的子字符串,并将该实例替换为另一个字符串“X”。我的测试字符串s="1foo100bar10gee1"我的初始模式是1个或多个数字的任何字符串,例如,re=Regexp.new(/\d+/)matches=s.scan(re)给出["1","100","10","1"]如果我想用“X”替换第N个匹配项,并且只替换第N个匹配项,我该怎么做?例如,如果我想替换第三个匹配项“10”(匹配项[2]),我不能只说s[matches[2]]="X"因为它做了两次替换“1fooX0barXg

  3. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  4. ruby - 正则表达式将非英文字母匹配为非单词字符 - 2

    @raw_array[i]=~/[\W]/非常简单的正则表达式。当我用一些非拉丁字母(具体来说是俄语)尝试时,条件是错误的。我能用它做什么? 最佳答案 @raw_array[i]=~/[\p{L}]/使用西里尔字符进行测试。引用:http://www.regular-expressions.info/unicode.html#prop 关于ruby-正则表达式将非英文字母匹配为非单词字符,我们在StackOverflow上找到一个类似的问题: https://

  5. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  6. 阿里云国际版免费试用:如何注册以及注意事项 - 2

    作为新的阿里云用户,您可以50免费试用多种优惠,价值高达1,700美元(或8,500美元)。这将让您了解和体验阿里云平台上提供的一系列产品和服务。如果您以个人身份注册免费试用,您将获得价值1,700美元的优惠。但是,如果您是注册公司,您可以选择企业免费试用,提交基本信息通过企业实名注册验证,即可开始价值$8,500的免费试用!本教程介绍了如何设置您的帐户并使用您的免费试用版。​关于免费试用在我们开始此试用之前,您还必须遵守以下条款和条件才能访问您的免费试用:只有在一年内创建的账户才有资格获得阿里云免费试用。通过此免费试用优惠,用户可以免费试用免费试用活动页面上列出的每种产品一次。如果您有多个帐

  7. TimeSformer:抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”,各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解,本篇主要介绍了FBAI团队的TimeSformer,这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用,就请点赞、收藏、关注!paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  8. ruby - 正则表达式在哪个位置失败? - 2

    我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式,但在这种情况下,我必须找到与表达式相对应的字符串停止的位置,但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有?)例如,如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案 一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置,你可以确定匹配结束

  9. ruby - 有没有办法从 ruby​​ case 语句中访问表达式? - 2

    我想从then子句中访问c​​ase语句表达式,即food="cheese"casefoodwhen"dip"then"carrotsticks"when"cheese"then"#{expr}crackers"else"mayo"end在这种情况下,expr是食物的当前值(value)。在这种情况下,我知道,我可以简单地访问变量food,但是在某些情况下,该值可能无法再访问(array.shift等)。除了将expr移出到局部变量然后访问它之外,是否有直接访问caseexpr值的方法?罗亚附注我知道这个具体示例很简单,只是一个示例场景。 最佳答案

  10. ruby - 正则表达式 - 排除一个字符 - 2

    这是一个例子:s="abcd+subtext@example.com"s.match(/+[^@]*/)Result=>"+subtext"问题是,我不想在其中包含“+”。我希望结果是“潜台词”,没有+ 最佳答案 您可以在正则表达式中使用括号来创建匹配组:s="abcd+subtext@example.com"s=~/\+([^@]*)/&&$1=>"subtext" 关于ruby-正则表达式-排除一个字符,我们在StackOverflow上找到一个类似的问题:

随机推荐