Angularjs+路由表格的增删改查综合

最新推荐文章于 2021-05-23 22:00:34 发布
最新推荐文章于 2021-05-23 22:00:34 发布
阅读量261 收藏
点赞数
分类专栏： 网页设计 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingyueyezi01/article/details/78302888
版权 
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"/>&nbsp;&nbsp;
                年龄：<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>&nbsp;&nbsp;
                <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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
sequelize常见操作使用方法（增删改查，手把手教学）
Beyond the max
01-22 4万+
关于sequelize的准备工作这里不再赘述. 一、引入sequelize模块 var Sequelize = require('sequelize'); 二、连接数据库 var sequelize = new Sequelize( 'sample', // 数据库名 'root', // 用户名 'psw', // 用户密码 {
计算机网络查看路由表命令,如何查看、添加、修改、删除路由器内部的路由表项？...
weixin_29057237的博客
07-05 1万+
路由表的使用，我们可能很少接触，路由表中的项与路由器本身有很大关联的，如果用户需要操作路由表，我们可以使用特定的命令进入路由表进行管理，阅读下文了解查看、添加、修改、删除路由器内部的路由表项的方法。什么是路由表？在计算机网络中，路由表或称路由择域信息库(RIB)是一个存储在路由器或者联网计算机中的电子表格(文件)或类数据库。路由表存储着指向特定网络地址的路径(在有些情况下，还记录有路径的路由度量值...
Angularjs 增删改查1
Star_Q的博客
09-20 410
综合练习 .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } var app = angular.module("myApp",["ngRoute"]); //使用config配置路由规则 app.config(["$ro
angularJS/路由实现增删改查
weikai_的博客
10-22 547
html> html> head> meta charset="UTF-8"> title>综合练习title> style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } style>
AngularJS模块化开发--增删改查
浅浅の博客
12-13 228
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接： 首先了解requirejs RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一（模块加载器） RequireJS的诞生是为了解决这两个问题 实现JS文件的异步加载避免页面失去响应； 管理模块之间的依赖关系，便于代码编写和维护。 官方描...
mvc+ef+api实现增删改查
08-17
在IT行业中，开发Web应用程序时，常常会使用到多种技术和框架来实现数据的增删改查（CRUD）操作。本项目"mvc+ef+api实现增删改查"就是一个典型的例子，它结合了Microsoft的ASP.NET MVC、Entity Framework（EF）以及...
路由+增删改查（vue)
12-04
不描述了 搞着好玩的！！！！也不知道说什么。。 。
EF+MVC+WebService增删改查
07-22
总结起来，"EF+MVC+WebService增删改查"是一个综合性的Web开发实例，它展示了如何利用现代.NET技术栈进行高效的数据管理和远程服务交互。这个例子对于学习和实践.NET开发，特别是涉及数据库操作和服务化设计的场景，...
springboot+vue+bootstrap实现用户增删改查
12-19
Vue Router用于页面路由，使应用具有单页应用(SPA)的特点。在用户交互中，Vue发送axios请求到后端API，获取或更新数据，并在前端界面动态渲染结果。 3. **Bootstrap**: Bootstrap是一个流行的前端CSS框架，提供了...
路由表的构成
weixin_33928467的博客
05-24 5177
路由表的构成： 目的网络地址（Dest） 掩码（Mask） 下一跳地址（GW） 发送的物理端口（interface） 路由信息的来源（Owner） 路由优先级（pri） 度量值（metric） 转载于:https://www.cnblogs.com/hwd-6/p/10915589.html...
angularjs表格的增删改查
healer1的博客
09-20 1578
综合练习 .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } var app = angular.module("myApp",["ngRoute"]); //使用config配置路由规则 app.config(["$ro
AngularJs增删改查_路由器
FH_94的博客
09-21 377
// 初始化数组 var users = [{"id":1,name:'张三',pwd:111,age:20,sex:'男','state':false}, {"id":"2","name":'李四','pwd':'222','age':'21',"sex":'女','state':false}, {"id":3,name:'王五',pwd:333,age:22,sex:'男','state
angular增删改查
qq_42818575的博客
07-28 367
月考练习03 .one{ background-color:coral; } .tow{ background-color:green; ...
简要介绍路由表以及路由表的生成
Number_0_0的博客
05-17 2万+
路由表： 路由表是指路由器或者其他互联网网络设备上存储的一张路由信息表，该表中存有到达特定网络终端的路径，在某些情况下， 还有一些与这些路径相关的度量。 【简介】 在计算机网络中，路由表或称路由择域信息库（RIB）是一个存储在路由器或者联网计算机中的电子表格（文件）或类数据库。路 由表存储着指向特定网络地址的路径（在有些情况下，还记录有路径的路由度量值）。路由表中含有网络周边的拓
路由表
weixin_30883777的博客
05-20 118
在计算机网络中，路由表或称路由择域信息库（RIB）是一个存储在路由器或者联网计算机中的电子表格（文件）或类数据库。路由表存储着指向特定网络地址的路径（在有些情况下，还记录有路径的路由度量值）。路由表中含有网络周边的拓扑信息。路由表建立的主要目标是为了实现路由协议和静态路由选择。 在现代路由器构造中，路由表不直接参与数据包的传输，而是用于生成一个小型指向表，这个指向表仅仅包含由路由算法选择的数据包...
路由表(RIB表、FIB表)、ARP表、MAC表整理
热门推荐
遇见你是我最美丽的意外
05-23 3万+
在一些常见的网络设备中(如交换机、路由器)，为了实现网络转发功能，各自通过维护一些表项来完成路由寻址及快速转发功能，其中比较重要的表项有： 路由表 转发表 Mac表 ARP表 本文对这网络中的最关键的四个表项做一个详细介绍。 目录 1. 路由表（Routing Table）、转发表（Forwarding Table） 2.Mac表（Media Access Control Table） 2.1 地址学习线程： 2.2 报文转发线程： 3. ARP表（Address Resolutio..
【笔记】AngularJs学习笔记[02]【实践回顾与知识点归纳】
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
11-22 886
上一篇中，我们介绍ng的数据绑定的方法，不知道你是否能给吸收。想了一下，为了在 ng 入门之前能够帮助大家打好基础，所以在这篇中我就用一个例子来解析 ng，并归纳一下 ng 的知识点。 希望在对这个例子进行了完整的注解之后，你能更清晰的理解ng的思路,并且希望您能亲自实践一下！实践是检验真理的唯一标准嘛~1.MVC ng是基于MVC的js库，首先你要了解一下JS在MVC上的解析。M：模型，包含应用当前状态的数据； V：视图，显示模型中的数据； C：控制器，管理模型与视图的关系。用一张图来解释：现在是否对ja
AngularJS中使用$http对MongoLab数据表进行增删改查
weixin_33797791的博客
01-08 92
  本篇体验使用AngularJS中的$http对MongoLab数据表进行增删改查。主页面：   &lt;button ng-click="loadCourse()"&gt;Load Course&lt;/button&gt; &lt;button ng-click="toggleAddCourse(true)"&gt;Add New Course&lt;/button&gt; ...
用vue组件+vue路由+vuex+axios实现增删改查
最新发布
05-29
好的，我可以为你提供一个简单的示例代码，用于展示如何使用Vue组件化、Vue路由、Vuex和Axios来实现增删改查功能。 首先，我们需要安装Vue、Vue Router、Vuex和Axios，你可以使用npm或yarn来安装它们。 接下来，我们创建一个Vue组件，用于显示数据列表和执行增删改查操作。在这个组件中，我们将使用Vuex来管理数据状态和执行异步操作，使用Axios来进行HTTP请求。 ```html <template> <div> <h1>Todo List</h1> <form @submit.prevent="addTodo"> <input v-model="newTodo" placeholder="Add new todo" /> <button type="submit">Add</button> </form> <ul> <li v-for="(todo, index) in todos" :key="todo.id"> <input type="checkbox" :checked="todo.completed" @change="toggleTodo(todo)" /> <span>{{ todo.text }}</span> <button @click="removeTodo(index)">Remove</button> </li> </ul> </div> </template> <script> import { mapGetters, mapActions } from 'vuex'; export default { computed: { ...mapGetters(['todos']), }, methods: { ...mapActions(['addTodo', 'removeTodo', 'toggleTodo']), }, data() { return { newTodo: '', }; }, }; </script> ``` 接下来，我们使用Vue Router来创建路由和路由组件，用于在不同的URL路径下显示不同的组件。在这个例子中，我们将创建一个路由，用于显示TodoList组件。 ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; import TodoList from './components/TodoList.vue'; Vue.use(VueRouter); const routes = [ { path: '/', component: TodoList, }, ]; const router = new VueRouter({ mode: 'history', routes, }); export default router; ``` 最后，我们使用Vuex来管理TodoList组件的状态和操作。我们将创建一个store对象，包含state、mutations、actions和getters。 ```javascript import Vue from 'vue'; import Vuex from 'vuex'; import axios from 'axios'; Vue.use(Vuex); const store = new Vuex.Store({ state: { todos: [], }, mutations: { SET_TODOS(state, todos) { state.todos = todos; }, ADD_TODO(state, todo) { state.todos.push(todo); }, REMOVE_TODO(state, index) { state.todos.splice(index, 1); }, TOGGLE_TODO(state, todo) { todo.completed = !todo.completed; }, }, actions: { async fetchTodos({ commit }) { const response = await axios.get('/api/todos'); commit('SET_TODOS', response.data); }, async addTodo({ commit }, text) { const response = await axios.post('/api/todos', { text, completed: false }); commit('ADD_TODO', response.data); }, async removeTodo({ commit }, index) { await axios.delete(`/api/todos/${state.todos[index].id}`); commit('REMOVE_TODO', index); }, async toggleTodo({ commit }, todo) { await axios.patch(`/api/todos/${todo.id}`, { completed: !todo.completed }); commit('TOGGLE_TODO', todo); }, }, getters: { todos: state => state.todos, }, }); export default store; ``` 现在我们已经完成了使用Vue组件化、Vue路由、Vuex和Axios实现增删改查功能的示例代码。当然，这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值