angularjs - 在angularjs xeditable表成功之前将数据插入表(数组)

Question

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

此外，showCategories(从 api 获取的类别)不起作用，但 gender(从本地获取)起作用。在选择框中(显示类别数据选项)但我无法选择类别数据。我使用与性别选择框相同的东西，但性别选择框有效但类别无效。我在哪里犯了错误？

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

---

所以，当我昨天看到 plunker 时，它有 4 个问题。我已经修好了所有这些。这是工作和测试 plunker另请阅读以下内容以了解到底出了什么问题。

---

问题一:请求成功前数据入表

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

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

拦截发布请求:

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'} 的语句未注释，反之亦然，插入将失败，新行将被自动删除。

通过成功请求顺利插入数据。

---

问题 2:类别不起作用

类别未被选中，因为在 $scope.showCategories = function 中你使用了 {value: user.category_id} 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);
    }
}

---