Angularjs+路由表格的增删改查综合
来源：互联网 发布：北京科技大学网络登录 编辑：程序博客网 时间：2024/06/07 21:52
login.html登录页面<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> </script> </head> <body> <center> <h3>注册页面</h3> <table border="1 solid blue" cellpadding="10" cellspacing="0"> <tbody> <tr> <th>用户名：</th> <td><input ng-model="name" type="text" placeholder="请输入用户名"/> </td> </tr> <tr> <th>密 码：</th> <td><input type="text" placeholder="请输入密码"/> </td> </tr> <tr> <th>年 龄：</th> <td><input type="text" placeholder="请输入年龄"/> </td> </tr> <tr> <th>性 别：</th> <td>男<input type="radio" value="name" id="name" /> 女<input type="radio" value="男" id="name2" /></td> </tr> <tr align="center"> <td colspan="2"><input ng-click="login()" type="button" value="注册"/></td> </tr> </table> </center> </body></html>main.html 主页面表格 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <center> <h3>主页面</h3> <div> 姓名：<input type="text" placeholder="用户名" size="8" ng-model="gen"/> 年龄：<select ng-model="size"> <option>--请选择--</option> <option>11-20</option> <option>21-30</option> <option>31-40</option> <option>41-50</option> <option>51-60</option> </select> <button ng-click="deleteSel()">批量删除</button><br/><br/> </div> <table border="1 solid blue" cellpadding="10" cellspacing="0"> <thead> <tr> <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th> <th>id</th> <th>姓名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="user in users | filter:{name:gen}" ng-if="ageSize(user.age,size)"> <td><input type="checkbox" ng-click="checkSelect($index)" ng-model="user.state"/></td> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.pwd}}</td> <td>{{user.age}}</td> <td>{{user.sex}}</td> <td><button>删除</button></td> </tr> </tbody> </table> </center> </body></html> text3.html核心页面 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .leftSide{ width: 20%; display: inline-block; background-color: red; height: 600px; float: left } .rightSide{ width: 80%; display: inline-block; background-color:#b2d235; height: 600px; float: right } li { list-style-type: none; font-size: 30px; padding: 37px 0px 37px 100px; border: 1px solid blue; margin-left: -40px; } li a { text-decoration: none; } </style> <!-- 1.导入库文件 --> <script src="angular.js"></script><script src="angular-route.js"></script> <script> /*2.注入路由服务*/ var app = angular.module("myApp",['ngRoute']); //3.配置路由规则 app.config(["$routeProvider",function($routeProvider){ //使用路由服务对象，配置路由规则 $routeProvider .when("/login",{ controller:"loginCtrl", templateUrl:"login.html" }) .when("/main",{ controller:"mainCtrl", templateUrl:"main.html" }) .when("/game",{ controller:"gameCtrl", templateUrl:"game.html" }) .when("/mine",{ controller:"mineCtrl", templateUrl:"mine.html" }) .when("/setting",{ controller:"settingCtrl", templateUrl:"setting.html" }) .otherwise({redirectTo:"/login"}); }]); //主控制器 app.controller("myCtrl",function($scope){ }); //注册页面控制器 app.controller("loginCtrl",function($scope){ $scope.name = ""; $scope.login = function(){ if($scope.name == null || $scope.name == ""){ alert("用户名不能为空"); } } }); //主页面控制器 app.controller("mainCtrl",function($scope){ $scope.users = [{ id:1, name:"张三", pwd:"111", age:22, sex:"男", state:false },{ id:2, name:"李四", pwd:"222", age:22, sex:"男", state:false },{ id:3, name:"王五", pwd:"333", age:44, sex:"男", state:false },{ id:4, name:"赵六", pwd:"444", age:55, sex:"男", state:false }]; $scope.deleteSel = function(){ //定义空数组，保存选中项的name var arr = []; //遍历数据源，把选中项的名字添加到数组中。 for(index in $scope.users){ if($scope.users[index].state){ //$scope.users.splice(index,1); arr.push($scope.users[index].name); } } //遍历含有选中项name属性的数组。有多少个被选中，数据源就会被遍历多少遍。 if(arr.length>0){ for(i in arr){ //对比选中项的名字在数组中的角标，根据角标删除当前对象，删一个数据源少一个。 for(i2 in $scope.users){ if(arr[i] == $scope.users[i2].name){ $scope.users.splice(i2,1); } } } }else{ alert("请选择"); } } //全选方法 $scope.selectAll = false; $scope.selectAllFun = function(){ if($scope.selectAll){ //alert("afsd"); for(index in $scope.users){ $scope.users[index].state = true; } }else{ for(index in $scope.users){ $scope.users[index].state = false; } } } //检测是否全选 $scope.checkSelect = function(index){ var temp = 0; if($scope.users[index].state == true){ alert("asdf"); temp++; }else{ temp--; } if(temp == $scope.users.length){ $scope.selectAll = true; }else{ $scope.selectAll = false; } var haha = false; for(i in $scope.users){ if($scope.users[i].state == true){ }else{ haha = true; } } if(haha){ $scope.selectAll = false; }else{ $scope.selectAll = true; } } //判断年龄范围 $scope.size = "--请选择--"; $scope.ageSize = function(age,size){ if(size == "--请选择--"){ return true; }else{ var arr = size.split("-"); var ageMin = arr[0]; var ageMax = arr[1]; if(age>ageMin && age<ageMax){ return true; }else{ return false; } } } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div class="leftSide"> <ul> <li><a href="#/login">登录</a></li> <li><a href="#/main">首页</a></li> <li><a href="#/game">游戏</a></li> <li><a href="#/mine">我的</a></li> <li><a href="#/setting">设置</a></li> </ul> </div> <div class="rightSide" ng-view> </div> </body></html>阅读全文
0 0
- Angularjs+路由表格的增删改查综合
- AngularJS的增删改查+路由
- angularjs表格的增删改查
- angularJS表格的增删改查
- angularjs 表格的增删改查
- AngularJS操作表格的增删改查
- Angularjs增删改查，路由
- angularJS/路由实现增删改查
- angularjs的表格的增删改查（关于商品）
- AngularJS对表格的增删改查(仅限前端)
- AngularJS表格的增删改查和其他操作
- angularjs表格的增删改查完成功能
- angularjs表格表单增删改查
- angularjs的增删改查
- angularjs的增删改查
- AngularJs增删改查
- angularjs增删改查
- AngularJs增删改查
- 筛法判素数（大数）
- AngularJS综合用户信息, 表单验证,过滤查询,全选反选,批量删除,修改,添加
- Android三种姿势带你玩转360度全景图功能
- hdu 1811 Rank of Tetris（拓扑排序+并查集）
- HDU 5919 Sequence II
- Angularjs+路由表格的增删改查综合
- python设计模式之设计模式简介
- hadoop概念-MapReduce数据流
- 正向代理和Nginx反向代理配置介绍
- android studio 日期选择DatePickerDialog取值
- Otsu算法原理及实现
- Spring装配Bean之组件扫描和自动装配
- 欢迎使用CSDN-markdown编辑器
- 伪随机编码冲雷达信号处理仿真
