angular双向数据绑定实例代码

前端之家收集整理的这篇文章主要介绍了angular双向数据绑定实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

第一步》》》导入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>
第三步 >>>>>编写实例代码

  1. <div class="panel panel-primary" ng-app="myCart" ng-controller="myCartController">
  2. <div class="panel-heading navbar-fixed-top" >购物车头部</div>
  3. <!--购物车正文开始 -->
  4. <div class="panel-body" style="margin-top: 40px;">
  5.  
  6. <div class="media-list">
  7.  
  8. <div class="media" ng-repeat="good in cartInfo">
  9. <a class="pull-left">
  10. <img ng-src="{{good.img}}" class="media-object img-thumbnail" />
  11. </a>
  12. <div class="media-body">
  13. <div class="media-heading">{{good.title}}</div>
  14. <p>价格 : {{good.price}} </p>
  15. <p>数量:
  16. <span class="glyphicon glyphicon-plus" aria-hidden="true" ng-click="jia(good)"></span>
  17. <input type="number" ng-model="good.num" width="9%" />
  18. <span class="glyphicon glyphicon-minus" aria-hidden="true" ng-click="jian(good)"></span>
  19. </p>
  20. <p>
  21. <span class="glyphicon glyphicon-trash icon-large" aria-hidden="true" ng-click="remove(good)"></span>
  22. </p>
  23. </div>
  24. </div>
  25.  
  26. </div>
  27. </div>
  28. <!--购物车正文结束 -->
  29. <div class="panel-footer navbar-fixed-bottom">
  30. <div class="form-horizontal text-right">
  31. <label>总金额: <strong class="text-primary">{{total() | currency}}</strong> </label>
  32. <label>折扣额: <strong class="text-primary"> {{bill.discount | currency}}</strong> </label>
  33. <label>实付: <strong class="text-primary">{{ subTotal() | currency }}</strong> </label>
  34. </div>
  35. </div>
  36. </div>

第四步》》》》》编写js
1.angualr都是从模块开始的步骤如下
4.1 创建angular模块 angualr.module('模块名称---ng-app')......js代码如下

  1. var myCart = angular.module("myCart",[]);
  2. myCart.controller("myCartController",function($scope) {
  3. //,{title:'惠普节能台灯',price:'99.00',num:10,img:'img/3.jpg'}
  4. $scope.bill = {
  5. discount: 0
  6. };
  7. $scope.cartInfo = [{
  8. title: '惠普机械键盘',price: 998.00,num: 1,img: 'img/1.jpg'
  9. },{
  10. title: '惠普机械鼠标',price: 668.00,img: 'img/2.jpg'
  11. },{
  12. title: '惠普节能台灯',price: '99.00',num: 10,img: 'img/3.jpg'
  13. },{
  14. title: '惠普机械键盘',img: 'img/3.jpg'
  15. }]; /*数量相加函数*/
  16. $scope.jia = function(obj) {
  17. obj.num = obj.num + 1;
  18. }
  19. /*相减函数*/
  20. $scope.jian = function(obj) {
  21. if (obj.num > 1) {
  22. obj.num = obj.num - 1;
  23. }
  24. }
  25. /*移除函数*/
  26. $scope.remove = function(obj) {
  27. for (var i = 0; i < $scope.cartInfo.length; i++) {
  28. if (obj.title === $scope.cartInfo[i].title) {
  29. $scope.cartInfo.splice(i,1);
  30. }
  31. }
  32. }
  33. /*计算总金额*/
  34. $scope.total = function() {
  35. var total = 0;
  36. for (var i = 0; i < $scope.cartInfo.length; i++) {
  37. total += $scope.cartInfo[i].price * $scope.cartInfo[i].num;
  38. }
  39. return total;
  40. }
  41. /*实付金额*/
  42. $scope.subTotal = function() {
  43. return $scope.total() - $scope.bill.discount;
  44. }
  45.  
  46. function equalTotal(newValue,oldValue,scope) {
  47. //alert(newValue+"---oldValue--"+oldValue);
  48. return $scope.bill.discount = newValue > 1000 ? 10 : 0;
  49. }
  50. $scope.$watch($scope.total,equalTotal);
  51. })

运行效果如下》》》》》》

猜你在找的Angularjs相关文章