angularJs框架主要運用於管理系統，對資料的增刪改查，下面就詳細的寫寫angualrJs在這4個方面的運用
一般情況下，我們得到如下的一個簡單的已經轉換為頁面的設計圖
有4個按鈕，它們的狀態各不相同。其中新增和刪除的初始狀態是abled,修改和刪除是disabled
html程式碼
1.按鈕
<div class="small-box">
<button class="btn btn-primary" ng-click="addOrEditLog('add')">
新增
</button>
<button class="btn btn-primary" ng-disabled="UI.disableEdit()" ng-click="addOrEditLog('edit')">
修改
</button>
<button class="btn btn-primary" ng-disabled="UI.disableDelete()" ng-click="deleteList()">
刪除
</button>
<button class="btn btn-primary" ng-click="searchUpdateLog()">
重新整理
</button>
</div>複製程式碼2.表格
<div class="row">
<div class="data-table">
<table class="table table-bordered table-hover text-center">
<thead>
<tr>
<th width="3%"><input type="checkbox" ng-model="UI.checkAll" ng-change="changeButtonStatus(true)" /></th>
<th width="5%">序號</th>
<th>標題</th>
<th>釋出時間</th>
<th>釋出人</th>
<th>更新內容</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in updateLogList">
<td><input type="checkbox" ng-model="x.selected" /></td>
<td ng-bind="$index+1"></td>
<td ng-bind="x.Title"></td>
<td ng-bind="x.LastUpdateTime"></td>
<td ng-bind="x.LastUpdateUser"></td>
<td>
<a ng-click="editActionLog(x)" href="javascripts:void(0);">[更新內容]</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">
<div class="clearfix" ng-if="paginationConf.totalItems!=0">
<div class="pagination" style="float: right; line-height: 23px; padding-left: 20px">共{{paginationConf.totalItems}}條 每頁{{paginationConf.itemsPerPage}}條記錄</div>
<ul uib-pagination
class="pagination-sm"
style="float: right;"
total-items="paginationConf.totalItems"
ng-model="paginationConf.currentPage"
items-per-page="paginationConf.itemsPerPage"
force-ellipses="true"
rotate="true"
first-text="首頁"
previous-text="上一頁"
next-text="下一頁"
last-text="尾頁"
max-size="5"
ng-change="searchUpdateLog('page')"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>複製程式碼Js程式碼
app.controller('updateLogCtrl', ["$scope", "$http", "$uibModal", "changeLogService", "CommonService", "exprotExcelService", function($scope, $http, $uibModal, changeLogService, commonService, ees) {
//顯示判斷類
$scope.UI = {
isSearching: true,
enabledEdit: false,
disableEdit: function() {
if (!$scope.updateLogList) {
return true;
}
var count = 0;
_.forEach($scope.updateLogList, function(n) {
if (n.selected) {
count++;
}
})
return count !== 1;
},
disableDelete:function(){
if(!$scope.updateLogList){
return true;
}
_.forEach($scope.updateLogList,function(n){
if(n.selected){
return false;
}
})
return true;
},
checkAll:false
}
$scope.changeButtonStatus=function() {
_.forEach($scope.updateLogList,function(n) {
n.selected = $scope.UI.checkAll;
});
}
//分頁外掛
$scope.paginationConf = {
currentPage: 1,
totalItems: 0,
itemsPerPage: 15,
perPageOptions: [15,20,30,40,50],
//rememberPerPage: 'perPageItems'
}
$scope.updateLogList = null;
$scope.formData= {
pageIndex:1,
pageSize:15
}
$scope.searchUpdateLog=function(type) {
var postData;
if (type) {
//搜尋預留
postData= {
pageIndex: $scope.paginationConf.currentPage,
pageSize: $scope.paginationConf.itemsPerPage
}
} else {
postData= {
pageIndex:$scope.paginationConf.currentPage,
pageSize:$scope.paginationConf.itemsPerPage
}
}
$scope.UI.isSearching = false;
changeLogService.getData(postData)
.success(function(data, status) {
debugger;
$scope.UI.isSearching = true;
_.forEach(data.data,
function(n) {
n["selected"] = false;
});
$scope.updateLogList = data.Data;
console.log(data);
$scope.paginationConf.totalItems = data.TotalCount;
});
}
$scope.searchUpdateLog();
$scope.addOrEditLog=function(type) {
var option;
switch (type) {
case "add":
option= {
type:"add"
}
break;
case "edit":
var model=null;
_.forEach($scope.updateLogList,
function(n) {
if (n.selected) {
model = n;
}
});
option= {
type:"edit",
editModel:model
}
default:
}
var modalInstance = $uibModal.open({
animation:true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'updateLogEdit.html',
controller: 'updateLogEditCtrl',
controllerAs: '$ctrl',
size: 'md',
resolve: {
options: function () {
return option;
}
}
});
modalInstance.result.then(function (status) {
$scope.searchUpdateLog();
debugger;
}, function () {
});
}
//更新內容
$scope.editActionLog=function(model) {
var option= {
editModel:model
}
var modalInstance = $uibModal.open({
animation:true,
templateUrl: 'actionLogEdit.html',
controller: 'actionLogEditCtrl',
size: 'lg',
resolve: {
options: function () {
return option;
}
}
});
modalInstance.result.then(function (status) {
}, function () {
});
}
$scope.deleteList=function() {
debugger;
var ids = [];
_.forEach($scope.updateLogList,
function(n) {
if (n.selected) {
ids.push( n.Id);
}
});
var postData = {
Ids:ids
}
layer.confirm('您確定要刪除麼?', { title: '確認刪除' }, function () {
changeLogService.deleteList(postData)
.success(function (data) {
layer.msg("刪除成功!");
//重置頁數
$scope.paginationConf.currentPage = 1;
$scope.searchUpdateLog();
});
})
}
})複製程式碼