AngularJS 實現管理系統中的增刪改查
阿新 • • 發佈：2017-10-06
系統 earch load onf auto splay adding bootstrap sof
前 言
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 實現管理系統中的增刪改查