增刪改查專項練習(二)
阿新 • • 發佈：2018-12-12
<head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/angular.min.js"></script> <style type="text/css"> tr td { } .aa{ background: blue; } .bb{ background-color: red; } </style> </head> <body ng-app="myapp" ng-controller="myctrl"> <input type="text" placeholder="按電影名稱模糊查詢..." ng-model="name" /> <select ng-model="key"> <option>--按要求排序--</option> <option value="playTime">+上映時間+</option> <option value="-playTime">-上映時間-</option> <option value="place">+售價+</option> <option value="-price">-售價-</option> </select> <button ng-click="isAddShow=!isAddShow">新增</button> <button ng-click="delAll1()">批量刪除</button> <div ng-show="isAddShow"> 電影名稱:<input type="text" ng-model="aname" /><span class="tip" id="sp1"></span><br /> 售價: <input type="text" ng-model="aprice" /><span class="tip" id="sp2"></span><br /> 類別: <input type="text" ng-model="atype" /><span class="tip" id="sp3"></span><br /> 電影時長: <input type="text" ng-model="aplayTime" /><span class="tip" id="sp4"></span><br /> 時長: <input type="text" ng-model="atime" /><span class="tip" id="sp5"></span><br /> <input type="button" value="新增" ng-click="add()" /> </div> <table border="1" cellpadding="5" cellspacing="0"> <tr align="center"> <td><input type="checkbox" onclick="qx(this)" /></td> <td>電影名稱</td> <td>類別</td> <td>時長</td> <td>導演</td> <td>售價</td> <td>上映時間</td> <td>評分</td> <td>操作</td> </tr> <tr ng-repeat="u in shops|filter:name|orderBy:key" align="center" class="$index%2==0?aa:bb"> <td><input type="checkbox" class="a" value="{{u.id}}" /></td> <td>{{u.name}}</td> <td>{{u.type}}</td> <td>{{u.time}}</td> <td>{{u.author}}</td> <td>{{u.price|currency:"￥:"}}</td> <td>{{u.playTime|date:"yyyy-MM-dd HH:mm:ss"}}</td> <td>{{u.score}}</td> <td> <button ng-click="del(u.id)">刪除</button> <button ng-click="xg(u.id)">修改</button> </td> </tr> </table> <br /> <div ng-show="showUpdate"> 您要修改的票價:<br /><input type="text"ng-model="bprice" placeholder="請輸入票價" /><br /><br /> <input type="button" value="ok" ng-click="xg1()"/> <input style="margin-left: 45px;" type="button" value="cancle" ng-click="xg2()"/> </div> <script type="text/javascript"> function qx(obj) { var cbs = $(".a"); alert(666) if(obj.checked) { cbs.each(function() { this.checked = true; }) } else { cbs.each(function() { this.checked = false; }) } } var app = angular.module("myapp", []); app.controller("myctrl", function($scope) { $scope.del = function(gid) { if(confirm("確認刪除嗎?")) { for(var i = 0; i < $scope.shops.length; i++) { if($scope.shops[i].id == gid) { $scope.shops.splice(i, 1); break; } } } } $scope.delAll = function() { var cbs = $("input:checked"); if(cbs.length == 0) { alert("請選擇要刪除的資料"); } else { cbs.each(function() { for(var i = 0; i < $scope.shops.length; i++) { if($scope.shops[i].id == $(this).val()) { $scope.shops.splice(i, 1); } } }) } } $scope.add = function() { var newgoods = {}; newgoods.price = $scope.aprice; newgoods.name = $scope.aname; newgoods.type = $scope.atype; newgoods.playTime = $scope.aplayTime; newgoods.time = $scope.atime; newgoods.author = "張子旭"; newgoods.score = 9.9; newgoods.playTime = new Date();
//