一篇小文章
阿新 • • 發佈：2018-11-05
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .t_span { background-color: yellow; } </style> <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> <script type="text/javascript"> var i = 2000; var app = angular.module("myapp", []).controller("myctrl", function($scope, $http) { //獲取資料 $http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest") .then(function(success) { $scope.goods = success.data; }) $scope.addr = [{ "province": "遼寧", "citys": [{ "city": "瀋陽", }, { "city": "大連", }, { "city": "葫蘆島", }, { "city": "撫順", } ] }, { "province": "河北", "citys": [{ "city": "唐山", }, { "city": "秦皇島", }, { "city": "石家莊", }, { "city": "保定", } ] }, { "province": "江蘇", "citys": [{ "city": "宿遷", }, { "city": "揚州", }, { "city": "南京", }, { "city": "泰州", } ] } ]; $scope.changeProvince = function() { $scope.select_city = $scope.select_province.citys[0]; } //新增訂單 $scope.flag_add = false; $scope.save = function() { i++; $(".t_span").html(""); var gname = $scope.gname; var uname = $scope.uname; var tel = $scope.tel; var price = $scope.price; var pro = $scope.select_province.province; var cit = $scope.select_city.city; if(gname == null || gname == "") { $("#gname_span").html("商品名稱不能為空"); return; } if(uname == null || uname == "") { $("#uname_span").html("使用者名稱名稱不能為空"); return; } if(tel == null || tel == "") { $("#tel_span").html("電話不能為空"); return; } if(price == null || price == "") { $("#price_span").html("價格不能為空"); return; } if(pro == undefined && cit == undefined) { $("#addr_span").html("必須填寫"); return; } //alert(gname+"--"+uname+"--"+tel+"--"+price+"--"+pro+"--"+cit); //新增 $scope.goods.push({ gname: gname, city: pro, id: i, price: price, uname: uname, tel: tel, regdate: new Date(), state: "已發貨" }); //alert($scope.goods.length); $scope.flag_add = false; //清空資料 $scope.gname=""; $scope.city=""; $scope.uname=""; $scope.price=""; $scope.city=""; $scope.tel=""; } //批量刪除 $scope.delAll = function() { for(var i = 0; i < $scope.goods.length; i++) { if($scope.goods[i].checked && $scope.goods[i].state == '已發貨') { $scope.goods.splice(i, 1); i--; } else { $scope.goods[i].checked = false; $scope.ischecked = false; } } } //全選全不選 $scope.change = function() { for(var i = 0; i < $scope.goods.length; i++) { $scope.goods[i].checked = $scope.ischecked } } }) </script> </head> <body ng-app="myapp" ng-controller="myctrl"> <button ng-click="flag_add=true">新增訂單</button> <button ng-click="delAll()">批量刪除</button> <input type="text" placeholder="按商品名稱查詢" ng-model="select_name" /> <input type="text" placeholder="按手機號查詢" ng-model="select_phone" /> <select ng-model="state"> <option value="">請選擇</option> <option value="已">已發貨</option> <option value="未">未發貨</option> </select> <table border="1px" cellspacing="0" cellpadding="0" width="800px"> <tr> <td><input type="checkbox" ng-model="ischecked" ng-change="change()" /></td> <td>id<button ng-click="px='id';sj=!sj">△</button></td> <td>商品名</td> <td>使用者名稱</td> <td>手機號</td> <td>價格<button ng-click="px='price';sj=!sj">△</button></td> <td>城市</td> <td>下單時間<button ng-click="px='regdate';sj=!sj">△</button></td> <td>狀態</td> </tr> <tr ng-repeat="g in goods|filter:{'gname':select_name,'tel':select_phone,'state':state}|orderBy:px:sj"> <td><input type="checkbox" ng-model="g.checked" /></td> <td>{{g.id}}</td> <td>{{g.gname}}</td> <td>{{g.uname}}</td> <td>{{g.tel}}</td> <td>{{g.price|currency:"¥"}}</td> <td>{{g.city}}</td> <td>{{g.regdate|date:"yyyy-MM-dd hh:mm:ss"}}</td> <td><span ng-show="g.state=='已發貨'" style="background-color: green;">{{g.state}}</span> <button ng-show="g.state=='未發貨'" style="background-color: yellow;" ng-click="g.state='已發貨'">{{g.state}}</button> </td> </tr> </table> <form ng-show="flag_add"> <fieldset id=""> <legend>新增訂單資訊</legend> 商品名:<input type="text" ng-model="gname" /><span id="gname_span" class="t_span"></span><br /> 使用者名稱: <input type="text" ng-model="uname" /><span id="uname_span" class="t_span"></span><br /> 手機號: <input type="text" ng-model="tel" /><span id="tel_span" class="t_span"></span><br /> 價格: <input type="text" ng-model="price" /><span id="price_span" class="t_span"></span><br /> 城市: <select ng-init="select_province=addr[0]" ng-model="select_province" ng-change="changeProvince()" ng-options="item.province for item in addr"></select> <select ng-init="select_city=select_province.citys[0]" ng-model="select_city" ng-options="city2.city for city2 in select_province.citys"><span id="addr_span" class="t_span"></span></select><br /> <button ng-click="save()">儲存</button> </fieldset> </form> </body>