angular查找

来源：互联网发布：淘宝运营培训学校编辑：程序博客网时间：2024/06/05 06:12

<!DOCTYPE html> <html ng-app="UMApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <script type="text/javascript" src="jquery.1.12.4.js"></script> <script type="text/javascript" src="angular-1.3.0.js"></script> <title>用户管理</title> <script type="text/javascript"> var example_data = [ { id: 1, name: "曹操", password: "123456", age: 45, sex: "男" }, { id: 2, name: "张辽", password: "123456", age: 34, sex: "男" }, { id: 3, name: "司马懿", password: "123456", age: 30, sex: "男" }, { id: 4, name: "夏侯淳", password: "123456", age: 40, sex: "男" }, { id: 5, name: "蔡文姬", password: "123456", age: 18, sex: "女" }, { id: 6, name: "刘备", password: "123456", age: 50, sex: "男" }, { id: 7, name: "关羽", password: "123456", age: 45, sex: "男" }, { id: 8, name: "张飞", password: "123456", age: 46, sex: "男" }, { id: 9, name: "赵云", password: "123456", age: 35, sex: "男" }, { id: 10, name: "孙尚香", password: "123456", age: 28, sex: "女" }, { id: 11, name: "孙权", password: "123456", age: 30, sex: "男" }, { id: 12, name: "周瑜", password: "123456", age: 32, sex: "男" }, { id: 13, name: "鲁肃", password: "123456", age: 33, sex: "男" }, { id: 14, name: "黄盖", password: "123456", age: 55, sex: "男" }, { id: 15, name: "小乔", password: "123456", age: 28, sex: "女" }, { id: 16, name: "小乔", password: "123456", age: 26, sex: "女" } ]; </script> <script type="text/javascript"> var app = angular.module("UMApp", []); app.controller("UMCtrl", function ($scope) { $scope.data = example_data; // 查询的年龄区间 $scope.age_sections = [ { txt: "10~20", min: 10, max: 20 }, { txt: "20~30", min: 20, max: 30 }, { txt: "30~40", min: 30, max: 40 }, { txt: "40~50", min: 40, max: 50 }, { txt: "50~60", min: 50, max: 60 }, { txt: "60~70", min: 60, max: 70 }, { txt: "70~80", min: 70, max: 80 } ]; // 清空列表：$scope.data前，备份下全部数据 var oldData = $scope.data; $scope.search = function () { var name = ""; var age = {}; // json对象，如：{txt: "70~80", min: 70, max: 80 } var sex = ""; if ($scope.search_name_value != undefined && $scope.search_name_value != null) { name = $scope.search_name_value.trim(); } // 未选中时值：undefined，选中“请选择”按钮时值：null if ($scope.search_age_value != undefined && $scope.search_age_value != null && $scope.search_age_value != "") { age = $scope.search_age_value; // age = json对象，如：{txt: "70~80", min: 70, max: 80 } } if ($scope.search_sex_value != undefined && $scope.search_sex_value != null) { sex = $scope.search_sex_value; } // 没有可查询的项 if (name == "" && age == "" && sex == {}) { return; } console.log("需要查找的name: " + name + ", 需要查找的age区间: [" + age.min + "~" + age.max + "], 需要查找的sex: " + sex); // 清空列表 $scope.data = []; // 从全部数据中查找name、age、sex，找到后添加到列表中 for (var i in oldData) { // name和age、sex 只要满足其中一个要求就可以添加到列表 var item = oldData[i]; // name相等，添加列表 if (item.name == name) { $scope.data.push(item); continue; } // age在区间，添加列表，age = json对象，如：{txt: "70~80", min: 70, max: 80 } if (item.age >= age.min && item.age <= age.max) { $scope.data.push(item); continue; } // sex相等，添加列表 if (item.sex == sex) { $scope.data.push(item); continue; } } }; }); </script> </head> <body ng-controller="UMCtrl"> <div> <input type="text" ng-model="search_name_value" ng-change="search()" placeholder="用户名查询"/>    年龄： <select ng-model="search_age_value" ng-options="section.txt for section in age_sections" ng-change="search()"> <option value="">请选择</option> </select>    性别： <select ng-model="search_sex_value" ng-change="search()"> <option value="">请选择</option> <option value="男">男</option> <option value="女">女</option> </select> </div> <table border="1"> <tr> <th> <input type="checkbox" name="check_all"/> </th> <th>ID</th> <th>用户名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> <tr ng-repeat="user in data"> <td> <input type="checkbox" name="user_id[]"/> </td> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.password }}</td> <td>{{ user.age }}</td> <td>{{ user.sex }}</td> <td> <button>修改密码</button> </td> </tr> </table> </body> </html>

阅读全文

0 0