说说上一节的例子，$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. HttpServletRequest 各种方法总结

    HttpServletRequest HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象 ...

  2. .Net Core迁移到MSBuild平台（二）

    一.前言 在上一篇文章.Net Core迁移到MSBuild的多平台编译问题中,简单的讲了下新的项目配置文件中的节点配置,这篇我将用一些例子来详细讲下从project.json迁移到msbuild过程 ...

  3. Yii2.0修改默认控制器

    设置默认控制器有两种方法 1.在/vendor/yiisoft/yii2/web/Application.PHP的第28行左右 public $defaultRoute = 'site';      ...

  4. Visual Studio 2015创建ASP.NET5项目“DNX SDK version 'dnx-clr-win-x86.1.0.0-beta5' 无法安装的错误

    使用asp.net5建立web application时遇到DNX SDK版本 “dnx-clr-win-x86.1.0.0-beta5”无法安装的错误 解决办法: 运行cmd: 1.输入: @pow ...

  5. 技术方案：在外部网址调试本地js（基于fiddler）

    1 解决的问题 1)        场景1:生产环境报错 对前台开发来说,业务逻辑都在js中,所以报错90%以上都是js问题. 如果生产环境出现报错,但是测试环境正常.这时修改了代码没有环境验证效果, ...

  6. Python之路-shell&计划任务

    开发脚本自动部署及监控1.编写脚本自动部署反向代理.web.nfs:要求: I.部署nginx反向代理三个web服务,调度算法使用加权轮询:           II.所有web服务使用共享存储nfs ...

  7. POPTEST老李谈JVM、JRE、JDK、java ee sdk with jdk区别

    POPTEST老李谈JVM.JRE.JDK.java ee sdk with jdk区别   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等 ...

  8. 手机自动化测试：appium源码分析之bootstrap六

    手机自动化测试:appium源码分析之bootstrap六   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest测试 ...

  9. Xmpp实现简单聊天系列 --- ②用户注册和登陆

    不管是注册还是登陆,亦或是聊天等功能,都必须先进行服务器连接,连接代码如下 ①自定义Xmpp连接工具类:     ②调用创建连接的方法:     ③连接服务器方法:       *注意 连接方式为客服 ...

  10. canvas画布

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...