Angularjs -- 基本概念
hello.html<html ng-app> <head> <script src="angular.js"></script> <script src="controllers.js"></script> </head> <body> <div ng-controller='HelloController'> <p>{{greeting.text}}, World</p> </div> </body> </html> |
controllers.jsfunction HelloController($scope) { $scope.greeting = { text: 'Hello' }; } |
<html ng-app> <head> <script src="angular.js"></script> <script src="controllers.js"></script> </head> <body> <div ng-controller='HelloController'> <input ng-model='greeting.text'> <p>{{greeting.text}}, World</p> </div> </body> </html> |
controllers.jsfunction HelloController($scope) { $scope.greeting = { text: 'Hello' }; } |
function HelloController($scope, $location) { $scope.greeting = { text: 'Hello' }; // use $location for something good here... } |
<!DOCTYPE html> <html ng-app> <head> <title>Your Shopping Cart</title> </head> <body ng-controller='CartController'> <h1>Your Order</h1> <div ng-repeat='item in items'> <span ng-bind="item.title"></span> <input ng-model='item.quantity'/> <span ng-bind="item.price | currency"></span> <span ng-bind="item.price * item.quantity | currency"></span> <button ng-click="remove($index)">Remove</button> </div> <script src="../js/angular-1.2.2/angular.js"></script> <script> function CartController($scope) { $scope.items = [ {title: 'Paint pots', quantity: 8, price: 3.95}, {title: 'Polka dots', quantity: 17, price: 12.95}, {title: 'Pebbles', quantity: 5, price: 6.95} ]; $scope.remove = function (index) { $scope.items.splice(index, 1); } } </script> </body> </html> |
<html ng-app> ng-app告诉Angular管理页面的那一部分。根据需要ng-app也可以放在<div>上 <body ng-controller="CartController"> Javascript类叫做控制器,它可以管理相应页面区域中的任何东西。 <div ng-repeat="item in items"> ng-repeat代表为items数组中每个元素拷贝一次该DIV中的DOM,同时设置item作为当前元素,并可在模板中使用它。 <span>{{item.title}}</span> 表达式{{item.title}}检索迭代中的当前项,并将当前项的title属性值插入到DOM中 <input ng-model="item.quantity"> ng-model定义输入字段和item.quantity之间的数据绑定 <span>{{item.price | currency}}</span> <span>{{item.price * item.quantity | currency}}</span> 单价和总价格式化成美元形式。通过Angular的currency过滤器进行美元形式的格式化。 <button ng-click="remove($index)"> Remove </button> 通过ng-repeat的迭代顺序$index,移除数据和相应的DOM(双向绑定特性) function CartController($scope) { CartController 管理这购物车的逻辑,$scope 就是用来把数据绑定到界面上的元素 $scope.items = [ {title: ‘Paint pots‘, quantity: 8, price: 3.95}, {title: ‘Polka dots‘, quantity: 17, price: 12.95}, {title: ‘Pebbles‘, quantity: 5, price: 6.95} ]; 通过定义$scope.items,我们已经创建一个虚拟数据代表了用户购物车中物品集合,购物车是不能仅工作在内存中,也需要通知服务器端持久化数据。 $scope.remove = function(index) {$scope.items.splice(index, 1);}; remove()函数能够绑定到界面上,因此我们也把它增加到$scope 中 |
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。