<!DOCTYPE html>

 <html lang="en" ng-app='myApp'>

 <head>

     <meta charset="UTF-8">

     <title>购物车</title>

 </head>

 <body ng-controller='CartController'>

     <h1>Your Order</h1>

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

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

         <input type="text" ng-model='item.quality'>

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

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

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

     </div>

     <script src='angular-1.3.0.js'></script>

     <script>

         var myApp=angular.module('myApp',[]);

         myApp.controller("CartController",["$scope",function($scope){

              $scope.items=[

                 {title:'Paint pots',quality:8,price:3.95},

                 {title:'Polka dots',quality:17,price:12.95},

                 {title:'Pebbles',quality:5,price:6.95}

             ];

             console.log($scope.items);

             $scope.remove=function(index){

                 console.log(index);

                 $scope.items.splice(index,1)

             }

          }]);

     </script>

 </body>

 </html>

效果图：

ng-repeat的意思是，对于items数组中的每一个元素，都把<div>中的DOM结构复制一份（包括div自身）。对于div的每一分拷贝，都会把item的属性设置给它，这样我们就可以在模板中使用这份拷贝的元素了。如你所见这样一来就会产生3个<div>，其中分别包含了产品的名称、数量、单价、总价，以及一个可以用来完全删除一个项目的按钮。

ng-model我们就可以保持变更与模型同步了。ng-model声明将会把item.quality的值插入文本框中，同时，不管什么时候，只要用户输入了新的数值，它就会自动更新item.quantity的值。

<button ng-click='remove($index)'>Remove</button>点击产品旁边的remove按钮即可，会调用remove（）函数。同时会把$index传递过去，$index包含了ng-repeat过程中的循环计数，这样一来我们就知道要删除哪一个项目。

CartController将会负责管理购物车的业务逻辑。在函数的形参中放一个$scope就可以告诉angular：控制器需要一个叫做$scope的东西。我们可以通过$scope把数据绑定到UI中的元素上。

通过定义$scope.items,我们创建了一个虚拟的hash型数据，用来表示用户购物车中的项目集合。我们想让这些项目能够对UI的数据绑定有效，所以我们要把它们设置到$scope上。
在绑定UI的时候，我们希望remove（）函数也有效，所以我们也要把它设置到$scope上。

<span>{{someText}}</span> 我们把这叫做双花括号插值语法，因为它可以把新的内容插入到现有的模板中。

控制器就是你所编写的类或者类型，它的作用是告诉angular该模型是由哪些对象或者基本数据构成的，只要把这些对象或者基本数据设置到$scope对象上即可，$scope对象就会被传递给控制器。

  myApp.controller("TextController",["$scope",function($scope){

     $scope.someText='jhhhhhh';

     }

 }]);

在很简单的情况下，以上使用基本数据类型的模型工作做得很好，但是对于大多数应用来说，你都需要创建模型对象类来容纳你的数据。我们来创建一个message模型对象，然后用它来存储someText属性。

var messages={};

      messages.someText='jhhhhh';

      myApp.controller("TextController",["$scope",function($scope){

      $scope.messages=messages;

      }

}]);

然后在模板中这样使用：

<p>{{messages.someText}}</p>

Angular(二）的更多相关文章

  1. angular(二)

    angularjs第二章 自定义指令 scope 控制器 AngularJS控制器控制AngularJS应用程序的数据,是常规的JavaScript对象. ng-controller指令就是用来定义应 ...

  2. Angular(二) - 组件Component

    1. 组件Component示例 2. Component常用的几个选项 3. Component全部的选项 3.1 继承自@Directive装饰器的选项 3.2 @Component自己特有的选项 ...

  3. 【Angular专题】——（1）Angular，孤傲的变革者

    目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...

  4. angular编译机制

    转载https://segmentfault.com/a/1190000011562077 Angular编译机制 前言 http://www.cnblogs.com/ztwBlog/p/620975 ...

  5. Angular 7开发环境配置

    目录 前言 一.搭建项目  1.安装Angular CLI  2.创建项目  3.集成Element Angular 二.设置路由  1.创建路由模块  2.导入.导出RouterModule类  3 ...

  6. AngularJS的相关应用

    一.[AngularJS常用指令]        1.ng-app:声明Angular所管辖的区域.一般写在body或html上,原则上一个页面只有一个:           <body ng- ...

  7. angular服务二

    angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> ...

  8. angular学习笔记(二十九)-$q服务

    angular中的$q是用来处理异步的(主要当然是http交互啦~). $q采用的是promise式的异步编程.什么是promise异步编程呢? 异步编程最重要的核心就是回调,因为有回调函数,所以才构 ...

  9. Angular组件——组件生命周期(二)

    一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意 ...

随机推荐

  1. django中的分页管理

    有时,展示的对象太多,需要对他们进行分页展示,不能一页把所有的结果都展示出来吧,那样的话,哈哈,挺逗 使用Django分页器功能 从Django中导入Paginator模块(没有的话,自行下载,我是w ...

  2. 硬盘安装Windows Server 2008(解决系统盘符变成D盘)

    硬盘安装Windows 2008系统方法 操作系统最好用的无疑是server 2003,但是现在Server 2003支持的软件越来越少,很多是故意不支持Server 2003了, 像php5.5以上 ...

  3. openwrt(三) 固件的烧录

    导航: 方法1: tftp: 方法2: 在线升级 方法3: BIOS烧录 方法1:TFTP 这应该是最万能的一种方法了.TFTP是一种依靠网口传送数据的一种通信协议,没错,只是传输数据,并不是烧录,所 ...

  4. 001---web应用程序

    什么是web应用? 应用程序分两种模式:C/S.B/S 1 .C/S:客户端(Client)与服务端 一般独立运行 2 .B/S:浏览器(Browser)与服务端 这类应用要借助浏览器:谷歌.火狐.I ...

  5. POJ-2251 三维迷宫

    题目大意:给一个三维图,可以前后左右上下6种走法,走一步1分钟,求最少时间(其实就是最短路) 分析:这里与二维迷宫是一样的,只是多了2个方向可走,BFS就行(注意到DFS的话复杂度为O(6^n)肯定会 ...

  6. No module named appium

    在脚本中会有:from appium import webdriver 第一次运行时可能会遇到这样的error:No module named appium 之所以会报这样的error是因为没有装cl ...

  7. 03，Python网络爬虫第一弹《Python网络爬虫相关基础概念》

    爬虫介绍 引入 为什么要学习爬虫,学习爬虫能够为我们以后的发展带来那些好处?其实学习爬虫的原因和为我们以后发展带来的好处都是显而易见的,无论是从实际的应用还是从就业上. 我们都知道,当前我们所处的时代 ...

  8. sprintf()函数使用异常

    调试STM32F103,比如如下代码:使用springf函数,这个函数是把最后两个参数先格式化成字符串 ,输出到ERROR_STRING,如果他们合并的长度大于30会出现深情况? ] sprintf( ...

  9. 三层还是DDD，ORM还是Ado.Net，何去何从？

    我本想把这个问题放到博问去,前几次有去博问问过之类的问题,无奈大神们可能都不屑回答别人的低级问题.所以放到随笔里,一方面把自己对ORM.架构的一些看法写下来抛砖引玉,另一方面最主要的是想寻求大神们指指 ...

  10. 玩转Linux之内存管理-free

    玩转Linux之内存管理-free free命令可以显示Linux系统中空闲的.已用的物理内存及swap内存,及被内核使用的buffer.在Linux系统监控的工具中,free命令是最经常使用的命令之 ...