购物车综合练习题angular js

来源：互联网发布：税收数据质量管理编辑：程序博客网时间：2024/05/27 16:41
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="angular-1.3.0.js"></script><script src="jquery.1.12.4.js"></script><script>var myapp=angular.module("myapp",[]);var data=[{done:false,id:"1234",name:"ipad",price:3400,only:10,},{done:false,id:1244,name:"iphone",price:6400,only:5,},{done:false,id:1334,name:"mypad",price:4400,only:20,},{done:false,id:8234,name:"zpad",price:8400,only:130,}]myapp.controller("myctrl",function ($scope) {$scope.data=data;/*删除信息*/$scope.del=(function (hh) {var con=confirm("确定删除么?");if(con==true){for(var i=0;i<$scope.data.length;i++){if($scope.data[i].name==hh){$scope.data.splice(i,1);}}}else{}}) ;/*删除选中的*/$scope.delall=function () {var con=confirm("确定删除么?");if(con==true){for(var i=0;i<$scope.data.length;i++){if($scope.data[i].done==true){$scope.data.splice(i,1);i--;}}}else{}}/*全选*/$scope.checkAll=function () {for(var i=0;i<$scope.data.length;i++){if($scope.chec==true){$scope.data[i].done=true;}else{$scope.data[i].done=false;}}}$scope.shop = function () {$scope.shop.color="red";}});$(function () {$("#a").click(function () {$("#a").css("color","red");$("#aa").css("color","black");$("#a3").css("color","black");$("#a4").css("color","black");$("#a5").css("color","black");});$("#aa").click(function () {$("#a").css("color","black");$("#aa").css("color","red");$("#a3").css("color","black");$("#a4").css("color","black");$("#a5").css("color","black");});$("#a3").click(function () {$("#a").css("color","black");$("#aa").css("color","black");$("#a3").css("color","red");$("#a4").css("color","black");$("#a5").css("color","black");});$("#a4").click(function () {$("#a").css("color","black");$("#aa").css("color","black");$("#a3").css("color","black");$("#a4").css("color","red");$("#a5").css("color","black");});$("#a5").click(function () {$("#a").css("color","black");$("#aa").css("color","black");$("#a3").css("color","black");$("#a4").css("color","black");$("#a5").css("color","red");});});</script></head><body ng-app="myapp" ng-controller="myctrl"><div><h3>商品库存信息管理</h3><hr><div style="background-color: #E8FBFF;height: 25px"><input type="text" value="" placeholder="请输入关键字..." ng-model="search"><button type="button" style="margin-left:1270px;color: #c3c3c3;background-color: red"ng-click="delall()">批量删除</button></div><div><table border="1" bordercolor="#c3c3c3" width="500" cellpadding="0" cellspacing="0" style="width:1350px;text-align: center"><thead><tr><td ><input type="checkbox"ng-click="checkAll()" ng-model="chec"></td><td id="a" ng-click="desc=!desc;col='id'" >商品编号</td><td id="aa" ng-click="desc=!desc;col='name'">商品名称</td><td id="a3" ng-click="desc=!desc;col='price'">商品价格</td><td id="a4"ng-click="desc=!desc;col='only'">商品库存</td><td id="a5"ng-click="desc=!desc;col=''">数据操作</td></tr></thead><tr ng-repeat="item in data|filter:{'name':search}|orderBy:col:desc"><td><input type="checkbox" ng-model="item.done"></td><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price|currency:"¥"}}</td><td>{{item.only}}</td><td><button style="color: #E8FBFF;background-color: yellow" ng-click="del(item.name)">删除</button></td></tr></table></div></div></body></html>
阅读全文
0 0