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}}验证用户输入
状态
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 表单
form = {
{ user }}master = {
{ master}}验证实例
{
{ x1 }}{
{ x2 }} angular.lowercase()、angular.uppercase()、angular.isString()、angular.isNumber()使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:
AngularJS 依赖注入
输入一个数字:
结果: {
{ result}}我喜欢的网站
菜鸟教程
欢迎访问菜鸟教程
欢迎访问Google
淘宝
欢迎访问淘宝
切换
选择不同选项显示对应的值。
ng-switch 指令根据当前的值显示或隐藏对应部分。
以下实例演示了表单提交后 AngularJS 执行行。
转载地址:https://blog.csdn.net/amusement1992/article/details/53008611 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
关注你微信了!
[***.104.42.241]2024年03月27日 02时14分01秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
c#中 xml和json 互相转换
2019-04-21
c# HttpWebRequest与HttpWebResponse
2019-04-21
世界程序员编程水平排行榜TOP50,中国第一名
2019-04-21
同桌的你
2019-04-21
[转]大型网站架构的优化
2019-04-21
XSD标准架构-----<xsd:element> 元素详解
2019-04-21
Windows 7下配置JDK环境变量,JAVA环境变量配置,Tomcat服务器的使用
2019-04-21
[POJ1149 Pigs]
2019-04-21
前台table里的值通过npoi导出excle
2019-04-21
VSCode设置中文语言显示
2019-04-21
SVG交互动画制作
2019-04-21
2 变量、运算符、位运算
2019-04-21
Javascript DIV菜单代替alert
2019-04-21
C++虚函数
2019-04-21
Git 标签管理
2019-04-21
MySQL 安装与配置
2019-04-21
Splash Lua 脚本
2019-04-21
决策树 绘图
2019-04-21
基于hough变换的直线检测
2019-04-21