<!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. swoole学习(一)----linux安装swoole

    1.下载swoole 登录swoole官网 https://www.swoole.com/ 点击下载,找到github或者其他链接下载下来 放到虚拟机上. 也可以使用虚拟机下载 2.登录虚拟机 推荐使 ...

  2. 学习Pytbon第九天，函数1 过程和参数

    函数def func1():定义函数 '''testing1'''#函数的说明 print("in the func1")#定义过程 return 0 #得到函数的执行结果.还是程 ...

  3. MongoDb第一天

    安装之后进入cmd.进入到安装目录下的bin目录下. 任意选一个空目录,建立db,log的文件夹.之后终端命令行里面输入回车. D:\ProgramFiles\MongoDB\Server\3.6\b ...

  4. ESP-01S-ESP8266入门教程

    1.模块实物 2.引脚说明 3.连接说明,按下图将引脚连接到PC的串口(VCC接3V,GND接地,TX接串口TX,RX接串口的RX,CH_PD接3V,否则wifi不工作) 4.通过该PC串口配置WiF ...

  5. INSERT⋯ACCEPTING_DUPLICATE_KEYS

    使用ACCEPTING DUPLICATE KEYS时,当插入时发现这条记录已存在时,那么这条记录将不会被insert,后续记录继续执行insert

  6. Eclipse字体修改

    第一步: 第二步: 第三步: 第四步: 第五步: 第六步:

  7. Python os.walk() 简介

    Table of Contents 1. os.walk目录遍历 1.1. os.walk 1.2. 例子 1.2.1. 测试topdown 1.2.2. 运行时修改遍历目录 2. 参考资料 os.w ...

  8. 16 Django-admin管理工具

      admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INSTAL ...

  9. 8，实例化Flask的参数 及 对app的配置

    Flask 是一个非常灵活且短小精干的web框架 , 那么灵活性从什么地方体现呢? 有一个神奇的东西叫 Flask配置 , 这个东西怎么用呢? 它能给我们带来怎么样的方便呢? 首先展示一下: from ...

  10. oracle（sql）基础篇系列（二）——多表连接查询、子查询、视图

    多表连接查询 内连接(inner join) 目的:将多张表中能通过链接谓词或者链接运算符连接起来的数据查询出来. 等值连接(join...on(...=...)) --选出雇员的名字和雇员所在的部门 ...