如何实现增删改查一
2018-04-04 10:00
78 查看
<!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-1.8.2.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var app=angular.module("myApp",[]); app.controller("myCtr",function ($scope,$http) { $scope.arr=["--按要求排序--","电影时长正序","电影时长倒序","售价正序","售价倒序","上映时间正序","上映时间倒序"]; /*获取数据*/ $http.get("moni1.json").then(function (success) { $scope.info=success.data; }) /*全选全不选*/ $scope.qx=function () { for (var i = 0; i < $scope.info.length; i++) { $scope.info[i].check=$scope.iscks; } } /*模糊查询*/ $scope.sou=function () { $scope.str2=$scope.str1; } /*批量删除*/ $scope.delAll=function () { for (var i = 0; i < $scope.info.length; i++) { if ($scope.info[i].check) { $scope.info.splice(i,1); i--; } else{ alert("请选择您要删除的数据"); break; } } $scope.iscks=false; } /*排序*/ $scope.change=function () { /*首先获取需要排序的字段*/ var value=$scope.selectValue; switch (value){ case "电影时长正序": $scope.info.sort(function (a,b) { return a.time-b.time; }) break; case "电影时长倒序": $scope.info.sort(function (a,b) { return b.time-a.time; }) break; case "售价正序": $scope.info.sort(function (a,b) { return a.price-b.price; }) break; case "售价倒序": $scope.info.sort(function (a,b) { return b.price-a.price; }) break; case "上映时间正序": $scope.info.sort(function (a,b) { return a.playTime-b.playTime; }) break; case "上映时间倒序": $scope.info.sort(function (a,b) { return b.playTime-a.playTime; }) break; default: break; } } /*删除*/ $scope.del=function (index) { if (confirm("你确定要删除吗?")) { $scope.info.splice(index,1); alert("删除成功"); } } /*修改*/ $scope.upd=function (index) { var a=prompt("修改评分",$scope.info[index].score); $scope.info[index].score=a; } }) </script> </head> <body ng-app="myApp" ng-controller="myCtr"> <input type="text" placeholder="按电影名称模糊查询" ng-model="str1" style="border-radius: 6px;" /> <button ng-click="sou()">搜索</button> <select ng-model="selectValue" ng-options="s for s in arr" ng-init="selectValue=arr[0]" ng-change="change()">{{s}}</select> <button ng-click="delAll()">批量删除</button> <table border="1" cellspacing="0" cellpadding="0" width="60%"> <tr> <td> <input type="checkbox" ng-click="qx()" ng-model="iscks" /> </td> <td>电影名称</td> <td>类别</td> <td>时长</td> <td>导演</td> <td>售价</td> <td>上映时间</td> <td>评分</td> <td>操作</td> </tr> <tr ng-repeat="s in info|filter:{'name':str2}"> <td> <input type="checkbox" ng-model="s.check" /> </td> <td>{{s.name}}</td> <td>{{s.type[0]}},{{s.type[1]}}</td> <td>{{s.time}}分钟</td> <td>{{s.author}}</td> <td>{{s.price|currency:"¥:"}}</td> <td>{{s.playTime|date:"yyyy-MM-dd hh:mm:ss"}}</td> <td>{{s.score}}</td> <td> <button ng-click="upd($index)">修改</button> <button ng-click="del($index)">删除</button> </td> </tr> </table> </body> </html>
相关文章推荐
- C#如何实现对sql server数据库的增删改查
- pl/sql中如何实现对数据的快速增删改
- 如何实现单链表的增删操作
- 如何通过Mybatis实现数据的增删改查(CRUD)操作?
- Elasticsearch:分布式集群时增删改查是如何实现的?
- 如何实现增删改查三
- vue2 中如何实现动态表单增删改查实例
- 如何实现单链表的增删操作
- 如何实现单链表的增删操作
- 看Zepto如何实现增删改查DOM
- 如何有效实现应用系统的增删改查功能
- js 如何实现对数据库的增删改查
- js 如何实现对数据库的增删改查
- spring-boot react如何一步一步实现增删改查
- Android来电铃声默认设置的实现方法与如何设置语音来电的默认铃声
- 如何用nginx+ffmpeg实现苹果HLS协议 (http living stream)
- 设计模式:如何使用观测者模式实现监控和推送
- How to capture screen to bitmap如何实现截屏(Symbian)
- 在ASP.NET中如何实现和利用URL重写