前 言
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 实现管理系统中的增删改查
原文地址：http://www.cnblogs.com/ljr001/p/7631421.html