说说上一节的例子，$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. JVM-Java程序性能监控-初级篇

    前篇 - 小伙们都知道,java程序的性能监控主要是针对jvm中heap的监控~ 那么在做压力测试时如何对heap.线程等一系列的指标进行的监控的呢? 首先-你若不懂命令,那么就需要了解一套Java程 ...

  2. Pydev for eclipse 安装及配置

    1.安装JDK,eclipse 2.打开eclipse->help->install new software,点Add,名称输入:Pydev,更新链接为:http://pydev.org ...

  3. SEVERE: Error configuring application listener of class org.springframework.web.context.ContextLoaderListener错误

    错误信息:SEVERE: Error configuring application listener of class org.springframework.web.context.Context ...

  4. 让CEF支持FLASH(非安装插件的形式)

    测试环境: CEF3 + CefGlue 下载FLASH的NPAPI DLL文件 , 在CEF目录下新建文件夹plugins,然后把DLL文件放进去即可. 据说下面是PPAPI的方式,未测试 启动的时 ...

  5. Android开发之获取xml文件的输入流对象

    介绍两种Android开发中获取xml文件的输入流对象 第一种:通过assets目录获取 1.首先是在Project下app/src/main目录下创建一个assets文件夹,将需要获取的xml文件放 ...

  6. Previous operation has not finished; run 'cleanup' if it was interrupted

    在使用myeclipse的时候,点击保存的时候,控制台窗口总是弹出这个svn :Previous operation has not finished; run 'cleanup' if it was ...

  7. Flask入门笔记(一)

    一.程序的基本结构 1.1 最简单的Flask程序 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #coding=utf-8 # 初始化 from flask import Fla ...

  8. pyqt样式表语法笔记

    pyqt样式表语法笔记 pyqt QSS python 样式表 因为软件课设的原因开始学习使用pyqt4,才发现原来它也有样式表,而且语法跟css基本相同,而且一些功能实现起来感觉比js要简单方便得多 ...

  9. php写留言板

    简单的PHP留言板制作 做基础的留言板功能  需要三张表: 员工表,留言表,好友表 首先造一个登入页面: <form action="drcl.php" method=&qu ...

  10. CI Weekly #16 | 从另一个角度看开发效率：flow.ci 数据统计功能上线

    很开心的告诉大家,flow.ci 数据统计功能已正式上线. 进入 flow.ci 控制台,点击「数据分析」按钮,你可以按照时间日期筛选,flow.ci 将多维度地展示「组织与项目」的构建数据指标与模型 ...