<!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. Python 中关于文件操作的注意事项

    文件操作 #打开文件 f = open('要打开的文件路径',mode = 'r/w/a', encoding = '文件原来写入时的编码') #操作 data = f.read() #读取 f.wr ...

  2. 爬虫之urllib模块

    1. urllib模块介绍 python自带的一个基于爬虫的模块. 作用:可以使用代码模拟浏览器发起请求. 经常使用到的子模块:request,parse. 使用流程: 指定URL. 针对指定的URL ...

  3. PHP.18-图片等比例缩放

    图片等比例缩放 自定义函数ImageUpdateSize($pricname, $maxx, $maxy, $pre) 1.$pricname:被缩放的图片源(路径):2.$maxx,$maxy:缩放 ...

  4. sql server inser相关处理（添加一条，一次添加多条，Bulk插入多条）

    1,insert语句 insert into 表一(字段一,字段二,字段三) value(值一,值二,值三) 2,sql 插入多条语句,其中完整值之间用逗号分割 insert into 表一(字段一, ...

  5. 直接插入排序&希尔排序

    1.直接插入排序 时间复杂度O(n2) 工作原理: 通过构建有序序列,对于未排序数据,在已排序的序列中,从后向前扫描,找到相应的位置并插入. 插入排序在实现上,在从后向前扫描的过程中,需要反复把已排序 ...

  6. centos使用--supervisor使用

    目录 1 下载程序并安装 2 编辑配置文件 3 supervisor的使用 4 配置文件详细解析 参考资料 supervisor是用Python开发的一套通用的进程管理程序,能将一个普通的命令行进程变 ...

  7. 《Cracking the Coding Interview》——第5章：位操作——题目7

    2014-03-19 06:27 题目:有一个数组里包含了0~n中除了某个整数m之外的所有整数,你要设法找出这个m.限制条件为每次你只能用O(1)的时间访问第i个元素的第j位二进制位. 解法:0~n的 ...

  8. 收集的java面试题

    1.谈谈final, finally, finalize的区别. final—修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此一个类不能既被声明为 ...

  9. 手动实现一个lazyMan

    这应该算一个经典的面试题了,就是一个关于流程控制的问题,要求如下 //实现一个LazyMan,可以按照以下方式调用: LazyMan("Hank")//输出: //Hi! This ...

  10. css3实现圆角边框渐变

    <button class="border">112233</button> 创建button .border{ position: relative; b ...