Angularjs快速入门(二)

说说上一节的例子,$scope 我们没有创建这个对象,直接绑定就能获取里面的对象,这种风格遵循了一种叫迪米特法则的设计模式。

然后angular还有一种很强大的功能叫“指令”。

就是你可以吧模板编写成HTML的形式,而里面有些不属于HTML规范的东西,如引入的ng-controller。ng-model,接下来我们看个类似购物车的例子:

 1 <html ng-app=‘my-app’>
 2     <head>
 3         <tiltle>my shopping cart</title>    
 4     </head>
 5     <body ng-controller='CartController'>
 6         <h1>my order</h1>
 7         <div ng-repeat='item in items'>
 8             <span>{{item.title}}</span>
 9             <input ng-model='item.quantity'>
10             <span>{{item.price|currency}}</span>
11             <span>{{item.price * item.quantity|currency}}</span>
12             <button ng-click="remove($index)">remove</button>
13         </div>
14         <script src="angular.js"></script>
15         <script>
16             function  CarController($scope){
17                $scope.items=[
18                     {title:'Paint pots',quantity:8,price:3.33},
19                     {title:'Pack pots',quantity:5,price:2.33},    
20                     {title:'Pedbbles pots',quantity3,price:12}
21                 ];
22                 $scope.remove=function(index){
23                     $scope.items.splice(index,1);
24                 }
25             }
26         </script>
27         </body>
28     </html>

这其中有几个解释的地方,第一个就是ng-app='my-app',这个表示整个页面都是angular管理页面

第二个,ng-repeat=‘item in items’表示items数组中的每个元素都把<div>的dom结构复制一份,包括div本身,items有三组数,所以现在有三个div

第三个,{{item.title}}通过{{}}绑定数据,与ng-model='item.quantity'创建绑定关系

第四个,

{{item.price|currency}}
{{item.price * item.quantity|currency}}过滤器
currency是货币过滤器是内置的它可以为我们实现美元格式化。

第五个,
ng-click="remove($index)"
删除按钮,能删除购物车的物品。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏代码GG之家

Android 关机对话框概率没有阴影故障分析

Android 关机对话框概率没有阴影故障分析 ? 以玩的心态,做着感兴趣的事情而已,别无其他杂念。 android recent key长按事件弹起触发最近列...

2356
来自专栏Android点滴积累

Android指纹识别深入浅出分析到实战(6.0以下系统适配方案)

  指纹识别这个名词听起来并不陌生,但是实际开发过程中用得并不多。Google从Android6.0(api23)开始才提供标准指纹识别支持,并对外提供指纹识别...

3068
来自专栏Golang语言社区

Go语言·听说你想让程序运行的更快?

作者:孙飞撩技术 链接:https://www.jianshu.com/p/0db174aebfec 來源:简书

1914
来自专栏知晓程序

开发 | 技术高人如何开发小程序?他们用这套方法

1032
来自专栏NetCore

复杂而艰辛的重构之路--起步

你有没有试过,当你踏入一个新的公司,看到了几千几万几十万代码的时候,那种崩溃的感觉? 代码多不可怕,怕的是代码的可读性、维护性、扩展性是如此之差,这时候该怎么办...

2059
来自专栏IMWeb前端团队

Unix Pipes to Javascript Pipes

本文作者:IMWeb 杨文坚 原文出处:IMWeb社区 未经同意,禁止转载 Unix Pipes Unix管道扫描稿 ? 简单样例: $ ne...

19210
来自专栏张善友的专栏

动态方法和反射

.net 2.0和.net 1.x相比在反射方面加强了很多,动态方法是.net 2.0新增的内容.具体参看MSDN 如何:定义和执行动态方法  卢彦 在co...

17710
来自专栏FreeBuf

深入分析IE地址栏内容泄露漏洞

? 前言 在本文中,我们探讨的对象是IE浏览器,尽管该浏览器略显老态,但是其用户还是很多的,所以不容忽视。我最近对MSRC感到很欣喜,因为他们正在将工作重心移...

24310
来自专栏一场梦

不会PS的小白也可以轻松在线抠图的三个网站

1171
来自专栏程序员的碎碎念

Layer弹层组件

前几天了解到这个不错的弹层插件,样式好看,用起来也方便。喜欢的人看完我的博客也可以看官方网站哦:http://www.layui.com 在这个官方网站里有关于...

4155

扫码关注云+社区

领取腾讯云代金券