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=" 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);
};