AngularJS 实现管理系统中的增删改查
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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" onclick="xiu()">修改密码</a> <a class="btn btn-danger" href="login.html" onclick="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; } })
@唯芸熙
以上是关于AngularJS 实现管理系统中的增删改查的主要内容，如果未能解决你的问题，请参考以下文章
Elasticsearch全文检索技术 一篇文章即可从入门到精通（Elasticsearch安装，安装kibana，安装ik分词器，数据的增删改查，全文检索查询，聚合aggregations）(代码片