程序博客网 > alien skin bokeh mac

AngularJs路由查删

来源：互联网发布：alien skin bokeh mac 编辑：程序博客网时间：2024/06/08 03:11

//主main

<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>  <script type="text/javascript" src="../../AngularJS/angular.js" ></script> <script type="text/javascript" src="../../AngularJS/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><ahref="#/login">登录</a></li> <li><ahref="#/main">首页</a></li> <li><ahref="#/game">游戏</a></li> <li><ahref="#/mine">我的</a></li> <li><ahref="#/setting">设置</a></li> </ul> </div> <div class="rightSide" ng-view> </div> </body>

//设置各个小界面功能

//添加界面

<body> <center> <h3>注册页面</h3> <table border="1 solid blue" cellpadding="10" cellspacing="0"> <tbody> <tr> <th>用户名：</th> <td><inputng-model="name"type="text"placeholder="请输入用户名"/></td> </tr> <tr> <th>密　码：</th> <td><inputtype="text"placeholder="请输入密码"/></td> </tr> <tr> <th>年　龄：</th> <td><inputtype="text"placeholder="请输入年龄"/></td> </tr> <tr> <th>性　别：</th> <td><inputtype="text"placeholder="请输入性别"/></td> </tr> <tr align="center"> <td colspan="2"><inputng-click="login()"type="button"value="注册"/></td> </tr> </table> </center> </body>//删除查询

<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><inputtype="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><inputtype="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>

阅读全文

0 0

alien skin bokeh mac

alien skin bokeh mac

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子哪里能买到枪那有枪买那里能买到枪拿枪枪哪里有卖哪儿有枪买把枪怎么做枪哪里有枪可以买怎么能买到枪怎么买到枪哪有枪能买到枪吗哪里可买到枪那里可买到枪打一枪请问哪里有枪卖哪里有卖的枪哪里可以买到枪在哪可以买到枪那里可以买到枪怎么可以买到枪在哪里可以买到枪在那里可以买到枪买房子上哪个网站买房子去哪个网站买房子贷款贷款买房子如何买房子怎么买房子怎样买房子现在买房子买商品房买房子应该注意什么买房子的流程买房子网买不起房子没钱怎么买房子买房子的买房子看什么买房子需要什么