wocaonima
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #num { width: 30px; } .tip { color: red; } .yellow { background: red; } .red { background: yellow; } ul { list-style-type: none; text-align: center; } </style> </head> <body ng-app="Myapp" ng-controller="ctrl"> 查询:<input type="text" placeholder="按商品名模糊查询" ng-model="gname" /> 查询: <input type="text" placeholder="按价格名模糊查询" ng-model="gprice" /> <select ng-model="orderKey"> <option value="">---按要求排序--- </option> <option value="name">---按姓名正序---</option> <option value="-name">---按要求倒序---</option> <option value="price">---按价格正序---</option> <option value="-price">---按价格倒序---</option> </select> <input type="button" value="批量删除" ng-click="deleteMore()" /> <input type="button" value="入库/添加" ng-click="showAdd=!showAdd" /> <!--添加--> <fieldset id="" ng-show="showAdd"> <legend>添加商品</legend> <ul> <li>菜单:<input type="text" ng-model="name" /><span id="tip_name" class="tip"></span></li> <li>菜系:<input type="text" ng-model="type" /><span id="tip_type" class="tip"></span></li> <li>物价:<input type="number" ng-model="price" /><span id="tip_price" class="tip"></span></li> <li>月销量:<input type="number" ng-model="sells" /><span id="tip_sells" class="tip"></span></li> <li>点菜数量:<input type="number" ng-model="number" /><span id="tip_number" class="tip"></span></li> <li><input type="button" id="" value="添加" ng-click="addGood();" /></li> </ul> </fieldset> <table border="1" cellspacing="0" cellpadding="0" width="60%" style="margin: 10px; text-align: center;" ng-show="showTable"> <thead style="background-color: gray;"> <tr> <th><input type="checkbox" ng-model="checkAll" /></th> <th>菜单</th> <th>菜系</th> <th>物价</th> <th>月销量</th> <th>点菜操作</th> <th>菜单操作</th> <th>小计</th> </tr> </thead> <tbody> <tr ng-repeat="x in goods|filter:{name:gname,price:gprice}|orderBy:orderKey" class="{{$index%2? 'yellow':'red'}}"> <td><input type="checkbox" value="{{$index}}" ng-model="checkAll" /></td> <td>{{x.name}}</td> <td>{{x.type}}</td> <td>{{x.price | currency : '￥'}}</td> <td>{{x.sells}}</td> <td> <button ng-click="delnums($index)">-</button> <input type="number" id="num" ng-model="x.number" /> <button ng-click="addnums($index)">+</button></td> <td> <input type="button" value="删除" ng-click="deleteGood(x.name);" /> <input type="button" value="撤销" ng-click="showGood(x.name);" /> </td> <td>{{x.count=x.price*x.number| currency : '￥'}}</td> </tr> </tbody> </table> <div>总价是：{{getTotal()|currency:"￥："}}</div> <script type="text/javascript"> var app = angular.module("Myapp", []); app.controller("ctrl", function($scope, $http) { $scope.showTable = true; //网络请求 $http({ method: 'GET', url: 'http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=ThirdTest' }).then(function successCallback(response) { $scope.goods = response.data; }), function errorCallback(response) { //请求失败的代码 }; //批量删除 $scope.deleteMore = function() { if($scope.checkAll) { $scope.goods = []; } else { var checked = $("input[type=checkbox]:checked"); for(var i = checked.length - 1; i >= 0; i--) { $scope.goods.splice(checked[i].value, 1); } } } //删除 $scope.deleteGood = function(gname) { for(var i = 0; i < $scope.goods.length; i++) { if($scope.goods[i].name == gname) { $scope.goods.splice(i, 1); break; } } if($scope.goods.length == 0) { $scope.showTable = false; } } //del $scope.delnums = function (index) { $scope.goods[index].number--; } $scope.addnums = function (index) { $scope.goods[index].number++; } //验证 $scope.addGood = function() { //清空所有错误提示信息 $(".tip").html(""); //商品名 var name = $scope.name; if(name == null) { $("#tip_name").html("非空"); return; } var type = $scope.type; if(type == null) { $("#tip_type").html("非空"); return; } //价格 var price = $scope.price; if(isNaN(price)) { $("#tip_price").html("必须为数字且大于0"); return; } //月销量 var sells = $scope.sells; if(isNaN(sells)) { $("#tip_sells").html("必须为数字且大于0"); return; } //数量 var number = $scope.number; if(isNaN(number)) { $("#tip_number").html("必须为数字且大于0"); return; } } $scope.name = ""; $scope.type = ""; $scope.price = ""; $scope.sells = ""; $scope.number = ""; $scope.addGood = function() { var good = {}; good.name = $scope.name; good.type = $scope.type; good.price = $scope.price; good.sells = $scope.sells; good.number = $scope.number; $scope.goods.push(good); } //得到总价 $scope.getTotal = function() { var totalPrice = 0; for(var i = 0; i < $scope.goods.length; i++) { totalPrice += $scope.goods[i].count; } return totalPrice; } }); </script> </body> </html>
asdasd
