在angularjs xeditable表中成功之前将数据推入表（数组）
Posted
技术标签:
【中文标题】在angularjs xeditable表中成功之前将数据推入表（数组）【英文标题】：Data pushing into table(array) before success in angularjs xeditable table 【发布时间】：2016-09-01 06:10:13 【问题描述】：我想在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" 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"]
谁能帮帮我。提前致谢
【问题讨论】：
这对我来说不是很清楚。我可以了解更多信息吗？I want to insert the added data into table only after the post request is successful, but it will add before checking the post request 您考虑哪个post 请求？
这里是 plunker 示例，plunker，我无法设置类别，但我可以设置性别。谁能告诉我我在哪里做错了
【参考方案1】：
所以，当我昨天看到 plunker 时，它有 4 个问题。我已经修复了所有这些。这是工作和测试plunker 也请阅读以下内容以了解究竟出了什么问题。
问题一：请求成功前数据推入表中
数据在$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语句，只有一个必须不注释。
请求失败：如果带有 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);
【讨论】：
我试过了，对于性别和类别，我使用 $scope.saveUser(user) 函数与用户一起发送数据。我在性别和类别中使用的方式相同。但在性别方面，它正在发送正确的价值。但不在类别中。在提出请求时，它没有显示发送 json 数据的类别。如何正确发送请帮助我 好的，当您说“性别发送正确的值而类别未发送正确的值”时，您的意思是说当您安慰它时，数据如下所示： Object name: "codelearner" ，性别：“男性”，类别：“2” 5 4 如果您的意思是性别发送“男性”并且类别发送“2”，那么这根本不是问题。它应该会发生。因为这是您配置选项的方式。 如果您想更改按类别发送的数据，您只需从应用文件末尾的“类别数组”中更改它的值。像这样：旧的：value：'1'，name：'Celebrity' |新的：value: 'Celeb', name: 'Celebrity' 如果你现在控制台，你会看到：name: "codelearner", gender: "male", category: "celeb" 5 4 现在“2”被“celeb”代替了 从“类别的数组和性别数组值”中，您可以简单地发送您想要的任何内容，例如我想通过 id 而不是通过名称或文本获取数据，所以我只是将值更改为：/类别的与 $scope.categories 匹配的数组 = [ value: '1', name: 'Celebrity', value: '2', name: 'Oridary', value:'3', name:'Actor ']; and // 要匹配的性别数组 $scope.genders = [ value: '1', text: 'Male', value: '2', text: 'Female' ];如果你现在控制台，你会看到【参考方案2】：categories 问题：
理想的情况是让您的服务器处理用户表和类别列表的连接。服务器的工作是以体面的格式提供您的前端数据。毕竟，服务器应该比用户的计算机强大得多。您应该可以拨打users.category。但是假设无论出于何种原因这是不可能的。您现在必须遍历您的 categories 列表才能找到 user.category === category.value 喜欢的位置：
$scope.showCategories = function(user)
angular.forEach($scope.categories, function(category)
if(user.categories == category.value)
return category.value;
;
未保存的行问题：
这更多的是显示问题而不是流量问题。您不需要仅在服务器更新后才更新用户列表，您只希望它准确反映服务器中的内容。我对 x-editable 不熟悉，但是您可以通过使取消按钮的 ng-click 动作成为 $scope 上的一个函数来获得您想要的东西在它当前所做的 x-editable API 中。
如果出于某种原因，您完全反对将它放在您的表中，直到它在数据库中，那么您可能希望让addUser() 填充一个临时用户变量，将cancel 按钮设为零取出该变量，并且您的 HTML 仅在设置了该变量时才显示该行。
【讨论】：
对于性别和类别，我使用 $scope.saveUser(user) 函数与用户一起发送数据。我在性别和类别中使用的方式相同。但在性别方面，它正在发送正确的价值。但不在类别中。在提出请求时，它没有显示发送 json 数据的类别。如何正确发送请帮助我以上是关于在angularjs xeditable表中成功之前将数据推入表（数组）的主要内容，如果未能解决你的问题，请参考以下文章
带有xeditable的Angular js中的多选下拉菜单
在 angular xeditable 中更新本地模型的问题
使用带有角度 xeditable 的 bootstrap-datepicker