数据在angularjs xeditable表成功之前推入表(数组)

Question

我想在post请求成功后才将添加的数据插入到表中,但是在检查post请求之前它会添加.那么如何在成功之后才插入表行数据.

此外,showCategories(从api获得的类别)不起作用,但性别(从本地获取)正在起作用.在选择框中(显示类别数据选项)但我无法选择类别数据.我使用性别选择框相同的东西,但性别选择框工作但不是类别.我在哪里弄错了？

HTML

 <table class="table table-bordered table-hover table-condensed">
        <tr style="font-weight: bold">
            <td style="width:5%">No.</td>
            <td style="width:20%">Name</td>
            <td style="width:10%">Gender</td>
            <td style="width:30%">Profile photo</td>
            <td style="width:20%">Category</td>
            <td style="width:30%">Action</span>
            </td>
        </tr>
        <tr ng-repeat="user in users">
            <td>{{$index+1}}</td>
            <td>
                <span editable-text="user.name" e-name="name" onbeforesave="checkName($data, user._id)" ng-model="userName" e-form="rowform" e-required>
                      {{ user.name}}
                    </span>
            </td>
            <td>
            <span editable-select="user.gender" ng-model="gender" e-name="gender" e-form="rowform" e-ng-options="s.value as s.text for s in genders">
                  {{ showGender(user) }}
            </span>

            </td>

            <!-- ng-show="tableform.$visible" -->
            <td class="text-center" >
                    <img ng-src="/api/media/{{user.media_id}}" alt="No Image" style="margin-bottom:20px;width:100%;">
                    <a class="btn btn-success" ui-sref="media({_id: user._id })" style="border: .0625rem solid transparent;margin: 10px 0px;padding: .465rem 1rem;"> Upload File</a>
                <!-- <input type="file" flow-button   value="Upload"> -->
            </td>
            <td>
                 <span editable-select="user.category" e-name="category" e-form="rowform" e-ng-options="c.value as c.name for c in categories">
                  {{ showCategories(user) }}
                 </span> 
            </td>
            <td style="white-space: nowrap">
                <!-- form -->
                <form editable-form name="rowform" onbeforesave="saveUser($data,user_id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == user">
                    <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
                        save
                    </button>
                    <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
                        cancel
                    </button>
                </form>
                <div class="buttons" ng-show="!rowform.$visible">
                    <button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
                    <button class="btn btn-danger" ng-click="deleteUser(user)">delete</button>
                </div>
            </td>
        </tr>
    </table>

和 控制器

.controller('mainCtrl', function($scope, $stateParams, $timeout, userService, categoryService, $filter, $q, verifyDelete, $window, $rootScope, $http, $state, $mdDialog) {
    categoryService.init(function(category_response) {
        $scope.categories = category_response.data.result;
        $scope.category = JSON.parse(JSON.stringify(getCategory($stateParams._id)));
        console.log($scope.category);
    });

    function getCategory(id) {
        for (var i = 0; i < $scope.categories.length; i++) {
             console.log(i);
            if ($scope.categories[i]._id === id) {

                return $scope.categories[i];

            }
        }
        return {
            name: ''
        };
    }

    userService.init(function(user_response) {
        $scope.users = user_response.data.data;
    });


    $scope.genders = [{
        value: 'male',
        text: 'Male'
    }, {
        value: 'female',
        text: 'Female'
    }];

    $scope.loadCategories = function() {
        return $scope.categories.length ? null : $http.get('/api/categories/list').success(function(data) {
            $scope.categories = data;
        });
    };
$scope.showGender = function(user) {
var selected = [];
if(user.gender) {
   selected = $filter('filter')($scope.genders, {value: user.gender});
}
return selected.length ? selected[0].text : 'Not set';
 };


  $scope.showCategories = function(user) {
        var selected = [];
        if (user.category_id) {
            selected = $filter('filter')($scope.categories, {
                category_id: user.category_id
            });
        }
        console.log(selected);
         return selected.length ? selected[0]._id : 'Not set';
    };

  $scope.saveUser = function(user) {
    // console.log(name);
    if(user._id){

        $http.put('/api/users/'+user._id, user, $scope)
        .then(function(response) {
          $state.reload();
             }, function(response) {

            });

    }
    else{
        $http.post('/api/users/', user, $scope)
        .then(function(response) {
            $state.reload();

             }, function(response) {
                $scope.errorMessage=response.data;
                 $scope.errorValMessage = true;
                $timeout(function () {
                $scope.errorValMessage = false;
                }, 2000);



            });

    }
 };
$scope.addUser = function(user) {
$scope.inserted = {
    name:'',
     gender:null,
     email:'',
     password:'',
    re_password:'',
    category:null
};
$scope.users.push($scope.inserted);
};


})
.run(function(editableOptions) {
    editableOptions.theme = 'bs3';
});

用户的api数据

 {"total_rows":2,"start":0,"data":[{"_id":"572c7696d17dde185e059390","name":"aaaaaaaaaaa","gender":"female","email":"","password":"","re_password":"","category_id":"ordinary"},{"_id":"572c76c3d17dde185e059392","name":"cccccccccc","gender":"male","email":"","password":"","re_password":"","category_id":"ordinary"}]}

谁能帮帮我吗.提前致谢

Answer 1

所以，当我昨天看到这个插件时，发现它有 4 个问题。我已经修复了所有这些问题。这是工作并经过测试的plunker，还请阅读以下内容以了解到底出了什么问题。

问题一：请求成功之前将数据推送到表中

数据在请求响应之前插入$http.post，因为 xeditable 自动保存数据，后台状态代码为 400 或 200。如果状态代码为 400（失败），插入的项目将从前台删除，如果出现成功后，请求将根据需要进行处理。我使用 Angular-Mocks 来拦截请求，$http.post('/saveUser', data)因为它在 plunker 上并不实时存在。

如何检查它是否真的有效：

拦截post请求：

app.run(function($httpBackend)
{
    $httpBackend.whenPOST(/\/saveUser/).respond(function(method, url, data)
    {
    data = angular.fromJson(data);
    //return [404, {status: 'error'}];
    return [200, {status: 'ok'}];
});

上面提到的是拦截http.post请求的代码，我设置了两个返回语句，只有一个必须不注释。

请求失败的原因：如果语句{status: 'error'}未注释，反之亦然，则插入将失败，新行将被自动删除。

请求成功如果具有此状态代码的返回语句{status: 'ok'}正在运行，则一切都会顺利进行并且数据将被插入。

问题 2：类别不起作用

类别没有被选择，因为您在应有的位置$scope.showCategories = function使用了category_id 。{value: user.category_id}{value: user.category}

问题 3：删除也不起作用。

删除不起作用，因为在 HTML 中您将用户传递给 deleteUser 函数，如下所示：

ng-click="deleteUser(user)

本来应该是这样的：

ng-click="deleteUser($index)

问题 4：取消时插入空行。

添加新行然后单击“取消”时，表中会留下一个空行。所以我编写了一个新函数来执行（取消新插入）和（取消编辑数据）的取消作业。您可以向此函数添加更多验证，但基本思想已经存在。

这是删除新添加的行然后单击取消或编辑旧记录并单击取消的功能。

$scope.cancelit = function(rowform, index)
{
    console.log(rowform, index);
    if(rowform.$data.name !== '')
    {
      rowform.$cancel();
    }
    else
    {
      $scope.deleteUser(index);
    }
}