在 angularjs xeditable table 中成功之前将数据推入 table(array)
Data pushing into table(array) before success in angularjs xeditable table
我想在post请求成功后才将添加的数据插入到table中，但是它会在检查post请求之前添加。那么如何在成功后才插入table行数据。
此外，showCategories（从 api 获取的类别）不起作用，但性别（从本地获取）起作用。在 select 框中（显示类别数据选项）但我不能 select 类别数据。我使用了与性别 select 框相同的东西，但性别 select 框有效但类别无效。我哪里做错了？
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"}]}
谁能帮帮我。提前致谢
categories问题：
理想的情况是让您的服务器处理用户 table 和类别列表的加入。服务器的工作是以合适的格式提供您的前端数据。毕竟服务器的功能应该远比用户的电脑强大。您应该 能够调用{{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 上的一个函数来获得你想要的东西，并在你的 [=17] 上进行清理=] 列表，然后在 x-editable API 中执行它当前执行的 $cancel 操作。
如果出于某种原因，您完全反对在 table 中使用它，直到它进入数据库，那么您可能希望 addUser() 填充一个临时用户变量，让 cancel 按钮将该变量归零，并且您的 HTML 仅在设置变量时显示该行。
所以，当我昨天看到 plunker 时，它有 4 个问题。我已经修好了所有这些。这里正在运行并经过测试 plunker 还请阅读以下内容以了解到底出了什么问题。
问题 1：数据在成功请求前 table 秒推送
数据在 $http.post 请求响应之前被插入，因为 xeditable 自动保存数据天气幕后的状态代码是 400 或 200。如果状态代码 400（失败) 插入的项目将从前面 table 删除，如果成功，请求将按需要处理。我已经使用 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请求的代码我设置了两个return语句，只有一个必须不加注释。
通过以下方式使请求失败： 如果带有 {status: 'error'} 的语句未注释，反之亦然，插入将是失败，新行将被自动删除。
通过成功请求如果return语句具有此状态码{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：取消时插入空行。
当添加一个新行然后单击取消时，它会在 table 中留下一个空行。所以我写了一个新函数来执行（取消新插入）和（取消编辑数据）的取消作业。您可以向此函数添加更多验证，但基本思想就在那里。
这是删除新添加的行然后单击取消或编辑旧记录并单击取消的功能。
$scope.cancelit = function(rowform, index)
{
console.log(rowform, index);
if(rowform.$data.name !== '')
{
rowform.$cancel();
}
else
{
$scope.deleteUser(index);
}
}
我想在post请求成功后才将添加的数据插入到table中，但是它会在检查post请求之前添加。那么如何在成功后才插入table行数据。
此外，showCategories（从 api 获取的类别）不起作用，但性别（从本地获取）起作用。在 select 框中（显示类别数据选项）但我不能 select 类别数据。我使用了与性别 select 框相同的东西，但性别 select 框有效但类别无效。我哪里做错了？
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"}]}
谁能帮帮我。提前致谢
categories问题：
理想的情况是让您的服务器处理用户 table 和类别列表的加入。服务器的工作是以合适的格式提供您的前端数据。毕竟服务器的功能应该远比用户的电脑强大。您应该 能够调用{{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 上的一个函数来获得你想要的东西，并在你的 [=17] 上进行清理=] 列表，然后在 x-editable API 中执行它当前执行的 $cancel 操作。
如果出于某种原因，您完全反对在 table 中使用它，直到它进入数据库，那么您可能希望 addUser() 填充一个临时用户变量，让 cancel 按钮将该变量归零，并且您的 HTML 仅在设置变量时显示该行。
所以，当我昨天看到 plunker 时，它有 4 个问题。我已经修好了所有这些。这里正在运行并经过测试 plunker 还请阅读以下内容以了解到底出了什么问题。
问题 1：数据在成功请求前 table 秒推送
数据在 $http.post 请求响应之前被插入，因为 xeditable 自动保存数据天气幕后的状态代码是 400 或 200。如果状态代码 400（失败) 插入的项目将从前面 table 删除，如果成功，请求将按需要处理。我已经使用 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请求的代码我设置了两个return语句，只有一个必须不加注释。
通过以下方式使请求失败： 如果带有 {status: 'error'} 的语句未注释，反之亦然，插入将是失败，新行将被自动删除。
通过成功请求如果return语句具有此状态码{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：取消时插入空行。
当添加一个新行然后单击取消时，它会在 table 中留下一个空行。所以我写了一个新函数来执行（取消新插入）和（取消编辑数据）的取消作业。您可以向此函数添加更多验证，但基本思想就在那里。
这是删除新添加的行然后单击取消或编辑旧记录并单击取消的功能。
$scope.cancelit = function(rowform, index)
{
console.log(rowform, index);
if(rowform.$data.name !== '')
{
rowform.$cancel();
}
else
{
$scope.deleteUser(index);
}
}