AngularJS添加删除查询排序

来源：互联网发布：网络短剧排名编辑：程序博客网时间：2024/05/16 08:58

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title>  <script src="js/jquery-3.2.1.min.js"type="text/javascript"charset="utf-8"></script> <script src="js/angular.min.js"type="text/javascript"charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <style type="text/css"> fieldset { padding: .35em .625em .75em; margin: 0 2px; border: 1px solid silver } legend { padding: .5em; border: 0; width: auto } </style> </head> <body ng-app="myApp" ng-controller="myCtrl"> 姓名查询条件：<input type="text" id="name" /> <select id="paixu" ng-options="x for x in orders" ng-model="selected" ng-init="selected=orders[0]" ng-change="change()"> </select> <br> 用户列表 <br> <table border="1px" cellspacing="0px" cellpadding="0px" class="table-striped table-hover"> <tr style="background: #999999;"> <td><inputtype="checkbox"id="quan"ng-click="quan()" /></td> <td>姓名</td> <td>年龄</td> <td>拼音</td> <td>职位</td> <td>操作</td> </tr> <tr ng-repeat="person in persons"> <td><inputtype="checkbox"class="myCb" /></td> <td>{{person.name}}</td> <td>{{person.age}}</td> <td>{{person.pinyin}}</td> <td>{{person.zhiwei}}</td> <td><ahref="#"ng-click="dele($index)">删除</a></td> </tr> </table> <input type="button" id="piliang" value="批量删除" ng-click="deleAll()" /> <input type="button" id="cha" value="查询" ng-click="cha()" /> <input type="button" id="add" value="添加用户" ng-click="show()" /> <form id="f"> <fieldset id=""> <legend>添加用户信息</legend> 姓名:<input type="text" name="name1" id="name1" /><br> 年龄: <input type="text" name="age" id="age" /><br> 拼音: <input type="text" name="pinyin" id="pinyin" /><br> 职位: <input type="text" name="zhiwei" id="zhiwei" /><br> <input type="button" value="保存" ng-click="save()" /> </fieldset> </form>  <script type="text/javascript"> //默认下面添加页面隐藏 $("#f").hide(); var m = angular.module("myApp", []); m.controller("myCtrl", function($scope) { //初始化数据 $scope.persons = [{ "name": "张三", "age": 20, "pinyin": "zhangsan", "zhiwei": "总经理" }, { "name": "李四", "age": 25, "pinyin": "lisi", "zhiwei": "副经理" }, { "name": "王五", "age": 22, "pinyin": "wangwu", "zhiwei": "工程师" }]; //----------查询----------- $scope.cha = function() { //取值 var name = $("#name").val(); // alert(name) //判断 if (name == "") { alert("请输入姓名"); return; } //敏感词 if (name.indexOf("奥") != -1) { alert("有敏感词"); return; } var newPersons = []; //是否含有 for (var i = 0; i < $scope.persons.length; i++) { var p = $scope.persons[i]; if (p.name == name) { newPersons.push(p); } } //之后判断新的数组是否是为空 if (newPersons.length == 0) { alert("没有匹配项"); return; } $scope.persons = newPersons; } //---------查询结束------- //初始化下拉 $scope.orders = ["按年龄正序排列", "按年龄倒序排列"]; //change事件 $scope.change = function() { var pai = $("#paixu").val(); alert("dd" + pai) if (pai == "string:按年龄正序排列") { $scope.persons.sort(function(a, b) { if (a.age > b.age) { return 1; } else if (a.age < b.age) { return -1; } return 0; }); } else { $scope.persons.sort(function(a, b) { if (a.age > b.age) { return -1; } else if (a.age < b.age) { return 1; } return 0; }); } } //显示动画 $scope.show = function() { $("#f").show(1000); } //save $scope.save = function() { //验证年龄 var age = $("#age").val(); var b = isNaN(age); if (b == true) { //如果不是一个数字就是 true alert("年龄格式不正确") return } //添加 var name12 = $("#name1").val(); var age = $("#age").val(); var pinyin = $("#pinyin").val(); var zhiwei = $("#zhiwei").val(); var pe = { "name": name12, "age": age, "pinyin": pinyin, "zhiwei": zhiwei }; //创建ｐｅｒｓｏｎ对象 $scope.persons.push(pe); //消失 $("#f").hide(); } //删除 $scope.dele = function($index) { var c = confirm("是否确认删除？"); if (c == true) { $scope.persons.splice($index, 1); } } //批量删除 $scope.deleAll = function() { var b = confirm("是否确认删除？"); if (b == true) { //获取选中的复选框 var cbs = $("input[type=checkbox][class=myCb]:checked"); //遍历，删除复选框所在行 for (var i = 0; i < cbs.length; i++) { //取出每个复选框 var cb = cbs[i]; //删除所在行 var tr = cb.parentNode.parentNode; tr.remove(); } } } var flag = false; $scope.quan = function() { var cbs = $("input[type=checkbox]"); if (flag == false) { for (var i = 0; i < cbs.length; i++) { var cb = cbs[i]; cb.checked = true; } flag = true; } else { for (var i = 0; i < cbs.length; i++) { var cb = cbs[i]; cb.checked = false; } flag = false; } } }) </script> </body> </html>

阅读全文

1 0