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

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

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

 <html ng-app=‘my-app’>

     <head>

         <tiltle>my shopping cart</title>

     </head>

     <body ng-controller='CartController'>

         <h1>my order</h1>

         <div ng-repeat='item in items'>

             <span>{{item.title}}</span>

             <input ng-model='item.quantity'>

             <span>{{item.price|currency}}</span>

             <span>{{item.price * item.quantity|currency}}</span>

             <button ng-click="remove($index)">remove</button>

         </div>

         <script src="angular.js"></script>

         <script>

             function  CarController($scope){

                $scope.items=[

                     {title:'Paint pots',quantity:8,price:3.33},

                     {title:'Pack pots',quantity:5,price:2.33},

                     {title:'Pedbbles pots',quantity3,price:12}

                 ];

                 $scope.remove=function(index){

                     $scope.items.splice(index,1);

                 }

             }

         </script>

         </body>

     </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)"
删除按钮，能删除购物车的物品。

Angularjs快速入门（二）的更多相关文章

  1. AngularJS快速入门指南20：快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  2. AngularJS快速入门指南19：示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  3. AngularJS快速入门指南18：Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  4. AngularJS快速入门指南17：Includes

    使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...

  5. AngularJS快速入门指南16：Bootstrap

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  6. AngularJS快速入门指南15：API

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  7. AngularJS快速入门指南14：数据验证

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  8. AngularJS快速入门指南13：表单

    一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...

  9. AngularJS快速入门指南12：模块

    AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...

  10. AngularJS快速入门指南11：事件

    AngularJS拥有自己的HTML事件指令. ng-click指令 ng-click指令定义了AngularJS的click事件. <div ng-app="" ng-co ...

随机推荐

  1. QT 的使用及编写代码遇到的问题和解决方法

    QT 中将 QString 转化为 const char * 的问题 我开始的代码是这样的: QString qstr = "abcdef"; const char * cc = ...

  2. [编织消息框架][设计协议]opCode

    OpCode的全称 OpCode(Operation Code) 操作码的意思. OpCode 有几种域组成,不同领域格式组成不同 1.指令号 2.数据范围 3.数据内容 如 {code}{addr ...

  3. （28）初识struts框架

    案例剖析中介绍了一个自己写的mystruts框架,这里开始简单的认识struts框架. 1.先看一个简单的struts开发的例子来熟悉一下流程 Struts就是基于mvc模式的框架! (struts其 ...

  4. linux 根分区扩展

    linux根分区扩容 今天网站上传图片出问题了,一开始还以为是程序问题,后来发现原来是服务器存储空间不够,明明有200G的磁盘空间,没理由这么快就用完,查了一下分区情况,原来有两块磁盘,根分区只挂载在 ...

  5. Http相关

    1.http请求 http请求分为三部分:请求行,请求头,请求正文 1. 请求行 请求方式  GET   POST 请求资源路径 协议版本 GET与POST请求区别? get只能传递1kb以下数据,P ...

  6. Android Things教程：电气基础之直流电路理论

    译者注:由于本人水平有限,译文中难免会出现概念模糊.晦涩难懂,如果实在没心思看下去,请发挥你的学习能动性,到原文中自行翻译,感谢!!!点这里,直达英文各种长句的世界. 好了,既然你选择继续往下看,那就 ...

  7. 储存过程嵌套临时表同名引发的BUG?

    临时表使用:存储过程嵌套时,均创建了相同名称的临时表. create procedure SP_A ( @i int output )asbegin create table #t ( ta int ...

  8. 光环国际的PRINCE2培训时间

    一.光环国际的PRINCE2课程安排培训方式:    小班授课,50人为限;   全国网址直播课程,覆盖各个地区学员    精读原理配合独家开发大量实际案例研讨;    从商业战略角度解析PRINCE ...

  9. Redis中的master-slave&sentinel

    redis安装 解压完成后可以看到INSTALL和README.md文件,查看以获取更多有用信息. 在README文件中可以获取到软件的安装步骤.以下安装步骤基于此. #step1 进入文件夹,执行编 ...

  10. 老李分享：loadrunner操作mysql数据库

    老李分享:loadrunner操作mysql数据库        在poptest测试开发工程师就业培训的课程中,针对一套商业系统进行性能测试,目标是mysql后台数据库的负载能力,在这里我把测试代码 ...