AngularJS 实现管理系统中的增删改查

前言

AngularJS

在一个管理系统中，不外乎都是增删改查。

现在有如下图书管理系统，实现简单的增删改查。

需要用到bootstrap.css 、angular.js和angular-route.js

代码：

<body ng-app="app" ng-controller="ctrl"><div class="container" ><div class="row"><div class="col-xs-2"><div class="list-group"><a class="list-group-item active">操作列表</a><a href="#/" class="list-group-item">返回首页</a><a href="#/all" class="list-group-item">全部图书</a><a href="#/add" class="list-group-item">新增图书</a><a href="#/del" class="list-group-item disabled">删除图书</a><a href="#/sea" class="list-group-item disabled">查询图书</a></div><a class="btn btn-danger" href="login.html" οnclick="xiu()">修改密码</a><a class="btn btn-danger" href="login.html" οnclick="func()">退出系统</a></div><div class="col-xs-10" ng-view></div>    </div></div></body>

CSS代码：

<style type="text/css">body{margin: 0 auto;padding: 0 auto;background-color: #F0F2F4;}.container{width: 1000px;margin: 50px auto;}.list-group-item{text-align: center;}.moren{height: 400px;background-color: grey;font-size: 70px;color: #FFFFFF;text-align: center;font-weight: bold;line-height: 120px;padding-top: 65px;}.panel-primary .row{margin-bottom: 10px;}.btn-danger{display: block;margin: 40px auto;}</style>

这些是各按钮跳转的页面：

.config(function($routeProvider){$routeProvider.when("/",{templateUrl:"moren.html"}).when("/all",{templateUrl:"showbook.html"}).when("/add",{templateUrl:"addbook.html"}).when("/del",{template:"这是删除图书页面"}).when("/sea",{template:"这是查询图书页面"}).when("/update",{templateUrl:"updatebook.html"}).otherwise({redirectTo:"/"})})

这是系统原有的：

    $scope.bookList = [{"name": "姜浩真帅1","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅2","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅3","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅4","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅5","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅6","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅7","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅8","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅9","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅10","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅11","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅12","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅13","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅14","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"},{"name": "姜浩真帅15","author": "姜浩","date": "2015-06-17","price": "40","num": "100","printer": "教育出版社"}];

添加图书，一个新book

$scope.book={"name": "","author": "","date": "","price": "","num": "","printer": ""}

提交按钮的函数设为addBook()，设置提交后是否继续添加，否则清零，代码：

    $scope.addBook=function(){$scope.bookList.unshift($scope.book)if(!confirm("添加成功！是否继续添加！")){$location.path("/all");}$scope.book={"name": "","author": "","date": "","price": "","num": "","printer": ""}}

删除图书比较简单，函数为delBook($index)，用的是splice，代码：

$scope.delBook=function($index){$scope.bookList.splice($index,1);}

修改按钮函数为loadData($index)，为不妨碍修改项设一个updateIndex=-1，当点击修改时跳到修改页面，页面的内容为点击那一项的原有内容，代码：

    $scope.updateIndex = -1;$scope.loadData = function(index){$scope.updateIndex = index;$scope.book = {"name": $scope.bookList[index].name,"author": $scope.bookList[index].author,"date": $scope.bookList[index].date,"price": $scope.bookList[index].price,"num": $scope.bookList[index].num,"printer": $scope.bookList[index].printer}}

提交函数为update()，将bookList[$scope.updateIndex]的内容替换为copy的book

$scope.update = function(){$scope.bookList[$scope.updateIndex] = angular.copy($scope.book);$location.path("/all");$scope.book = {"name": "","author": "","date": "","price": "","num": "","printer": ""}}

查找设定的按书名查找，用到.filter服务

.filter("filterByName",function(){return function(bookList,search){if(!search) return bookList;var arr=[]for(var i=0;i<bookList.length;i++){var index=    bookList[i].name.indexOf(search);if(index>-1){arr.push(bookList[i]);}}return arr;}})

@唯芸熙

转载于:https://www.cnblogs.com/ljr001/p/7631421.html

AngularJS 实现管理系统中的增删改查相关推荐

创建一个简单的后台教务管理系统,包含动态增删改查学生,年级和课程信息及查看登录日志等功能,包含表单验证.
创建一个简单的后台教务管理系统,包含动态增删改查学生,年级和课程信息及查看登录日志等功能,包含表单验证. 一.显示页面新建一个登录页面,即login.jsp <%--Created by In ...
Hibernate中对增删改查的小结
Hibernate中对增删改查的小结 mysql中库表News,字段如下 id | int | auto_increment | primary key title | ...
SqlServer 中的增删改查语句的语法
一.增删改查SQL语法: 1.查询语句第一种法方: select 列名 from table(数据库表名) where(条件) 第二种法方: select *(表示所有的列) from table( ...
JDBC实现学生信息管理系统（仅增删改查）
思路:将程序简单的分为了一个主要的菜单类和其他的五个功能类,实现对数据库的信息的增删改查. 缺点:写了大量重复代码,实现的功能却不多,将每个类的界面和功能都写到了一个方法里,类与类之间完全分开,没有一 ...
巨杉数据库SequoiaDB在Java开发中的增删改查CURD
文章目录 JSON应用开发增删改查操作 1 快速入门 1.1 环境部署部署SequoiaDB集群环境部署Windows开发环境 1.2 正式开始 2 CURD教程 2.1 Java开发环境搭建 ...
mysql查看修改记录_（转）MySql中监视增删改查和查看日志记录
转载地址为:http://blog.51cto.com/hades02/1641652 首先在命令行输入 show global variables like '%general%' ,然后出现下面的 ...
mysql中的增删改查
显示数据库中有的表格 SHOW TABLES 增新建表格 CREATE TABLE urls( id int, url varchar(100), description varchar(100) ...
ci php做记录删除,CI(CodeIgniter)框架中的增删改查操作_PHP教程
CodeIgniter的数据函数类在 \system\database\DB_active_rec.php 代码如下: class ModelName extends CI_Model { funct ...
中去掉外键_【Java笔记】035天，MySQL中的增删改查
学习Java的第35天. 今天天除了学习MySQL中的各种约束,MySQL中DML的操作,还有MySQL查询语句ds-- MySQLdz中d的约束有: • 非空约束(not null) • 唯一性约束 ...

AngularJS 实现管理系统中的增删改查

AngularJS 实现管理系统中的增删改查相关推荐

最新文章

热门文章