Angularjs中表格的增刪改查

在一個管理系統中，不外乎都是增刪改查。如今好比有個表格，我想修改當前行的數據，以下圖所示

一點擊修改的時候，當前頁面我須要修改的數據，變成能修改的樣式，點擊保存能保存當前修改的數據，以下圖所示

須要引入的一些文件有

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/ng-table/dist/ng-table.js"></script> 
<script src="bower_components/ng-table-export/ng-table-export.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/ng-table/dist/ng-table.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-3.3.2-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="module/styles/form.css">
<script src="module/scripts/controllers/Form.js"></script>

 

前端頁面

 <table class="table table-bordered table-hover table-striped" id="packListTb" ng-table="tableParams">

    <thead>
    <tr>
        <th style="text-align: center;">小貓ID</th>
        <th style="text-align: center;">停車場名稱</th>
        <th style="text-align: center">停車場地址</th>
        <th style="text-align: center">是否有地圖點</th>
        <th style="text-align: center;">建立時間</th>
        <th style="text-align: center">操　做</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="park in parkListView" style="text-align: center;">
        <td>{{park.parkId}}</td>
        <td title="parkName">
            <span ng-if="!park.$edit">{{park.parkName}}</span>
            <div ng-if="park.$edit"><input class="form-contrel" type="text" ng-model="park.parkName"></div>
        </td>
        <td style="width: 390px;">{{park.address}}</td>
        <td>
            <span ng-if="park.parkUids.length>0" style="color: #00B7FF">是</span>
            <span ng-if="park.parkUids.length<=0" style="color: red">否</span>
        </td>
        <td >{{park.createDate | date:'yyyy/MM/dd HH:mm:ss'}}</td>
        <td title="Actions"><a type="button" class="btn btn-success" ng-if="!park.$edit" ng-click="park.$edit=true">修改</a>
                
            <a type="button" ng-if="park.$edit" class="btn btn-info" ng-click="editParkingName(park)">保存</a>
                
            <a type="button" ng-if="park.$edit" class="btn btn-default" ng-click="cancelEditName(park.$edit=false)">取消</a></td>
    </tr>
    <tr ng-hide="parkListView.length > 0">
        <td class="center" colspan="6"><b>沒有數據</b></td>
    </tr>
    </tbody>
    <tfoot>
    <tr ng-hide="parkListView.length <= 0">
        <td class="center" colspan="１" ng-click="parkListQuery(-1)"><a href="javascript:void(0);">上一頁</a></td>
        <td class="center" colspan="4">第{{pageCount+1}}頁/共{{totalPage+1}}頁    共{{totalCount}}條數據</td>
        <td class="center" colspan="１" ng-click="parkListQuery(1)"><a href="javascript:void(0);">下一頁</a></td>
    </tr>
    </tfoot>
</table>

 

js 頁面

$scope.editParkingName = function(park){
    $scope.currentPark = park;
    $scope.editParkId = park.parkId;
    $scope.editParkName = park.parkName;
    var opts = {
        editParkId : $scope.editParkId,
        editParkName : $scope.editParkName
    };
    $http.post("/parkuser/editParkingName",getSignParams(opts)).success(function (data) {
        if(data.flag==1){
            alert(data.msg);
            $scope.parkListQuery(0);
        }else{
            alert(data.msg);
            $scope.parkListQuery(0);
        }
    });
    console.info('打印出來：'+$scope.editParkId+"======="+$scope.editParkName);
};

$scope.cancelEditName = function (park) {
    $scope.parkListQuery(0);
};