加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 06:58:10 所属栏目:安全 来源:网络整理
导读:我想在post请求成功后才将添加的数据插入到表中,但是在检查post请求之前它会添加.那么如何在成功之后才插入表行数据. 此外,showCategories(从api获得的类别)不起作用,但性别(从本地获取)正在起作用.在选择框中(显示类别数据选项)但我无法选择类别数据.我使用
我想在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/',$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","category_id":"ordinary"}]}

谁能帮帮我吗.提前致谢

解决方法

所以,当我昨天看到那个掠夺者时,其中有4个问题.我已经修好了所有这些.这是工作和测试 plunker也请阅读以下内容,以了解究竟是什么错误.

问题1:在成功请求之前在表中推送数据

数据在$http.postrequest响应之前被插入,因为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请求的代码我设置了两个return语句,只有ONE必须保留取消注释.

通过以下方式使请求失败:如果带有{status:’error’}的语句被取消注释,反之亦然,插入将失败,新行将自动删除.

请求成功如果具有此状态代码{status:’ok’}的返回语句正在运行,则所有内容都将顺利进行,并且将插入数据.

问题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);
    }
}

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读