说说上一节的例子，$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. 1820: [JSOI2010]Express Service 快递服务

    1820: [JSOI2010]Express Service 快递服务 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 847  Solved: 325 ...

  2. xml与json的原理,区别,优缺点.

    1.定义介绍 (1).XML定义扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许 ...

  3. ajax上传图片

    选择文件后 ajax上传图片到后台,后台执行保存操作,返回上传的图片路径,显示到页面 需要引入ajaxfileupload.js js代码 <script type="text/jav ...

  4. 深入理解java String 及intern

    一.字符串问题 字符串在我们平时的编码工作中其实用的非常多,并且用起来也比较简单,所以很少有人对其做特别深入的研究.倒是面试或者笔试的时候,往往会涉及比较深入和难度大一点的问题.我在招聘的时候也偶尔会 ...

  5. 2015.07.12hadoop伪分布安装

    hadoop伪分布安装   Hadoop2的伪分布安装步骤[使用root用户用户登陆]other进去超级用户拥有最高的权限 1.1(桥接模式)设置静态IP ,,修改配置文件,虚拟机IP192.168. ...

  6. benchmark 库

    性能测试的库 https://github.com/bestiejs/benchmark.js

  7. 《C++之那些年踩过的坑（三）》

    C++之那些年踩过的坑(三) 作者:刘俊延(Alinshans) 本系列文章针对我在写C++代码的过程中,尤其是做自己的项目时,踩过的各种坑.以此作为给自己的警惕. [版权声明]转载请注明原文来自:h ...

  8. Redis应用----消息传递

    1.摘要 消息传递这一应用广泛存在于各个网站中,这个功能也是一个网站必不可少的.常见的消息传递应用有,新浪微博中的@我呀.给你评论然后的提示呀.赞赞赞提示.私信呀.甚至是发微博分享的新鲜事:知乎中的私 ...

  9. [.NET] 一步步打造一个简单的 MVC 网站 - BooksStore（一）

    一步步打造一个简单的 MVC 网站 - BooksStore(一) 本系列的 GitHub地址:https://github.com/liqingwen2015/Wen.BooksStore 简介 主 ...

  10. 什么是node.js

    1.0什么是nodejs 1.1定义: Node.js是Javascript除了浏览器之外可以运行的另一个环境(runtime).可以为我们提供开启服务功能和提供文件读写功能 1.2特点: 1)基于g ...