Rumah > Artikel > hujung hadapan web > AngularJs应用:实现类似购物页面的一个小例子(附代码)
本篇文章给大家带来的内容是关于AngularJs应用:实现类似购物页面的一个小例子(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
写个小应用,熟练一下AngularJs.。
<!DOCTYPE html> <html ng-app='myApp'> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="./src/css/index.css" /> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> var myApp=angular.module('myApp',[]);//定义一个控制器 var model={//model模块,里面主要包含了数据 money:0, items:[ {name:'钢笔',price:50,number:1}, {name:'练习本',price:1,number:0}, {name:'保温杯',price:25,number:0}, {name:'书包',price:80,number:0} ] }; //$scope是angular的一个全局对象,你可以往上面加上属性和方法 myApp.controller('myControl',function($scope) {//控制器模块 $scope.model=model;//注意一下,前面的model在HTML中是看不到的,$scope.model这个model是可以的 $scope是全局对象,注意 $scope.Add=function (newItem) {//添加内容 $scope.model.items.push({name:newItem.name,price:newItem.price}); } $scope.sum=function() {//计算费用 var Sum=0; angular.forEach($scope.model.items , function (item) { Sum+=item.price*item.number; } ); return Sum; } $scope.add=function(target) { target.number++; } }) </script> </head> <!-- view模块 --> <body ng-controller='myControl'> <div class='container'> <div class='row'> <div class='col-md-5'> <h2 style='color:red' >总价为: {{sum()}}元</h2> </div> </div> <br> <div class='row'> <div class='col-md-10'> 商品:<input type='text' ng-model='newItem.name'><!-- 值被赋给了newItem.name--> 单价:<input type='text' ng-model='newItem.price'> <button class='btn btn-success btn-md' ng-click='Add(newItem)' >添加</button> </div> </div> <br> <div class='row'> <div class='col-md-10'> <table class='table table-striped'> <thead> <tr> <th>商品</th> <th>单价</th> <th>购买数</th> <th>Buy Or Not</th> </tr> </thead> <tbody > <tr ng-repeat='item in model.items' > <td >{{item.name}}</td> <td>{{item.price}}</td> <td>{{item.number}}</td> <td><button class='btn btn-success' ng-click='add(item)'>BUY</button></td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
运行效果如下:
相关推荐:
Atas ialah kandungan terperinci AngularJs应用:实现类似购物页面的一个小例子(附代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!