angular双向数据绑定实例代码
来源:互联网 发布:淘宝电脑版登录界面 编辑:程序博客网 时间:2024/05/01 05:01
第一步》》》导入bootstrap的css样式
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
第二步》》》导入angular的js文件
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
第三步 >>>>>编写实例代码
<div class="panel panel-primary" ng-app="myCart" ng-controller="myCartController"><div class="panel-heading navbar-fixed-top" >购物车头部</div><!--购物车正文开始 --><div class="panel-body" style="margin-top: 40px;"><div class="media-list"><div class="media" ng-repeat="good in cartInfo"><a class="pull-left"><img ng-src="{{good.img}}" class="media-object img-thumbnail" /></a><div class="media-body"><div class="media-heading">{{good.title}}</div><p>价格 : {{good.price}} </p><p>数量:<span class="glyphicon glyphicon-plus" aria-hidden="true" ng-click="jia(good)"></span><input type="number" ng-model="good.num" width="9%" /><span class="glyphicon glyphicon-minus" aria-hidden="true" ng-click="jian(good)"></span></p><p><span class="glyphicon glyphicon-trash icon-large" aria-hidden="true" ng-click="remove(good)"></span></p></div></div></div></div><!--购物车正文结束 --><div class="panel-footer navbar-fixed-bottom"><div class="form-horizontal text-right"><label>总金额: <strong class="text-primary">{{total() | currency}}</strong> </label><label>折扣额: <strong class="text-primary"> {{bill.discount | currency}}</strong> </label><label>实付: <strong class="text-primary">{{ subTotal() | currency }}</strong> </label></div></div></div>
第四步》》》》》编写js
1.angualr都是从模块开始的步骤如下
4.1 创建angular模块 angualr.module('模块名称---ng-app')......js代码如下
var myCart = angular.module("myCart", []);myCart.controller("myCartController", function($scope) {//,{title:'惠普节能台灯',price:'99.00',num:10,img:'img/3.jpg'}$scope.bill = {discount: 0};$scope.cartInfo = [{title: '惠普机械键盘',price: 998.00,num: 1,img: 'img/1.jpg'}, {title: '惠普机械鼠标',price: 668.00,num: 1,img: 'img/2.jpg'}, {title: '惠普节能台灯',price: '99.00',num: 10,img: 'img/3.jpg'},{title: '惠普机械键盘',price: 998.00,num: 1,img: 'img/1.jpg'}, {title: '惠普机械鼠标',price: 668.00,num: 1,img: 'img/2.jpg'}, {title: '惠普节能台灯',price: '99.00',num: 10,img: 'img/3.jpg'}]; /*数量相加函数*/$scope.jia = function(obj) {obj.num = obj.num + 1;}/*相减函数*/$scope.jian = function(obj) {if (obj.num > 1) {obj.num = obj.num - 1;}}/*移除函数*/$scope.remove = function(obj) {for (var i = 0; i < $scope.cartInfo.length; i++) {if (obj.title === $scope.cartInfo[i].title) {$scope.cartInfo.splice(i, 1);}}}/*计算总金额*/$scope.total = function() {var total = 0;for (var i = 0; i < $scope.cartInfo.length; i++) {total += $scope.cartInfo[i].price * $scope.cartInfo[i].num;}return total;}/*实付金额*/$scope.subTotal = function() {return $scope.total() - $scope.bill.discount;}function equalTotal(newValue, oldValue, scope) {//alert(newValue+"---oldValue--"+oldValue);return $scope.bill.discount = newValue > 1000 ? 10 : 0;}$scope.$watch($scope.total, equalTotal);})
运行效果如下》》》》》》
0 0
- angular双向数据绑定实例代码
- angular-数据双向绑定
- Angular双向数据绑定
- Angular双向数据绑定
- Angular双向数据绑定
- Angular双向数据绑定原理
- 【AngularJs】Angular双向数据绑定
- angular 的数据双向绑定
- angular数据双向绑定解密
- 【Angular】双向数据绑定--作用域树
- Angular双向数据绑定简易实现
- angular 第二章 双向数据绑定
- Angular之双向数据绑定基础
- Angular JS中的数据双向绑定
- angular.js学习(1)--双向数据绑定
- 使用angular实现双向数据绑定
- angular.js 双向数据绑定,依赖注入
- angular利用双向数据绑定改变样式
- 利用OpenCV的findContours作轮廓检测
- windows下安装oracle 数据库软件打补丁,总是检测到有活动进程
- MTK功能机,屏幕背光最早响应时间
- LIBSVM学习(一)在Matlab环境下安装LIBSVM
- socket监听端口读取端口信息
- angular双向数据绑定实例代码
- 《Linux设计与实现》学习笔记——定时器和时间管理
- java 邮件验证 mail
- cocos2d
- 广域网协议简介
- HTCAPTION与WM_NCLBUTTONDBLCLK及最大化的关系
- TCP--RST复位攻击
- 当醋遇上葡萄干,奇迹便出现了!可是知道的人不多
- itpt_TCPL 第一章:C简要教程