- <!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 type="text/javascript" src="angular.js">
- </script>
- <script type="text/javascript" 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(id, name, pwd, age, sex) {
- if ($scope.name == null || $scope.name == "") {
- alert("用户名不能为空");
- } else {
- }
- }
- });
- //主页面控制器
- 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() {
- for (var i = 0; i < $scope.users.length; i++) {
- if ($scope.users[i].state == true) {
- $scope.users.splice(i, 1);
- i--;
- }
- }
- }
- //如果选项全部现在 全选按键自动为true
- $scope.checkSelect = function() {
- var flag = 0;
- for (var i = 0; i < $scope.users.length; i++) {
- if ($scope.users[i].state == true) {
- flag++;
- }
- }
- if (flag == $scope.users.length) {
- $scope.selectAll = true;
- } else {
- $scope.selectAll = false;
- }
- };
- //全选方法
- $scope.selectAll = false;
- $scope.selectAllFun = function() {
- for (var i = 0; i < $scope.users.length; i++) {
- if ($scope.selectAll === true) {
- $scope.users[i].state = true;
- } else {
- $scope.users[i].state = false;
- }
- }
- };
- //单个删除
- $scope.sc = function($index) {
- $scope.users.splice($index, 1)
- }
- //判断年龄范围
- $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">
- <p 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>
- </p>
- <p class="rightSide" ng-view>
- </p>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <center>
- <h3>主页面</h3>
- <p>
- 姓名:<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/>
- </p>
- <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 ng-click="sc($index)">删除</button></td>
- </tr>
- </tbody>
- </table>
- </center>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <script></script>
- <script>
- </script>
- </head>
- <body>
- <center>
- <h3>注册页面</h3>
- <table border="1 solid blue" cellpadding="10" cellspacing="0">
- <tbody>
- <tr>
- <th>i d:</th>
- <td><input ng-model="id" type="text" placeholder="请输入用户名"/> </td>
- </tr>
- <tr>
- <th>姓 名:</th>
- <td><input ng-model="name" type="text" placeholder="请输入用户名"/> </td>
- </tr>
- <tr>
- <th>密码:</th>
- <td><input type="text" ng-model="pwd" placeholder="请输入密码"/> </td>
- </tr>
- <tr>
- <th>年龄:</th>
- <td><input type="text" ng-model="age" placeholder="请输入年龄"/> </td>
- </tr>
- <tr>
- <th>性别:</th>
- <td><input type="text" ng-model="sex" placeholder="请输入性别"/> </td>
- </tr>
- <tr align="center">
- <td colspan="2"><input ng-click="login(id,name,pwd,age,sex)" type="button" value="注册"/></td>
- </tr>
- </table>
- </center>
- </body>
- </html>
来源: https://www.2cto.com/kf/201710/691604.html