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();
                        });
                })
            }
        })