角度内联编辑

时间:2017-06-01 10:18:32

标签: angularjs

我在angular.Its做了一个简单的内联编辑工作正常,但当我尝试与服务器端代码集成时,我正在努力。我不知道如何在更新时发送编辑的字段值。

HTML:

<table class="table table-hover table-bordered" id="mydata" ng-controller="myCtrl">
                    <thead class="colorBlue">
                        <tr>
                            <th>S.No</th>
                            <th>Role Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="">
                        <tr ng-repeat="x in roleList | filter:searchText">
                            <td>{{x.Id}}</td>
                            <td>
                                <span ng-hide="editMode">{{x.name}}</span>
                                <input type="text" ng-show="editMode" ng-model="x.name" />
                            </td>
                            <td>
                                <i class="edit fa fa-pencil-square-o" id="edit{{x.Id}}" ng-click="editMode = true;edit(x.Id)" ng-hide="editMode"></i>
                                <i class="update fa fa-floppy-o" id="update{{x.Id}}" ng-hide="true" ng-show="editMode" ng-click="editMode = false"></i>
                                <i class="editCancel fa fa-times" id="editCancel{{x.Id}}" ng-click="editMode = false" ng-hide="true" ng-show="editMode"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>

脚本:

<script>
    var app=angular
                .module("intranet_App", [])
                .controller('myCtrl', function ($scope, $http) {
                    $scope.values = {

                    };
                    $http.post("/Admin/getUserList")
                    .then(function (response) {                     
                        $scope.roleList = response.data;
                    });
                    $scope.edit=function(val){
                        $scope.editing = $scope.items.indexOf(val);
                    }
                    $scope.update = function (val) {
                        $http.post("/Admin/UserUpdate")
                        .then(function (response) {
                            alert("updated successfully");
                        })
                    }
                    //$scope.cancel = function (val) {

                    //}
                })
</script>

从此方法获取表格数据/Admin/getUserList
在更新行时,我需要将已编辑的数据传递给此方法/Admin/UserUpdate

请帮忙吗?

0 个答案:

没有答案