Передача данных в таблицу (массив) перед успехом в таблице angularjs xeditable
Я хочу вставить добавленные данные в таблицу только после успешного запроса 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"}]}
может кто-нибудь, пожалуйста, помогите мне. Заранее спасибо
2 ответов
Итак, когда я вчера увидел планкер, в нем было 4 проблемы. и я все исправил. Вот работает и тестируется plunker также, пожалуйста, прочитайте следующее, Чтобы понять, что именно было не так.
Проблема № 1: передача данных в таблицах перед запросом успеха
данные вставлялись до $http.postзапрос ответа, так как xeditable автоматически сохраняет данные погода код состояния за кулисами 400 или 200. В случае кода состояния 400 (сбой) вставленный элемент будет удален из передней таблицы, а в случае успеха запрос будет обработан по желанию. Я использовал угловые насмешки, чтобы перехватить $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 request я установил два оператора return, только один должен быть оставлен незафиксированным.
сбой запроса по: если заявление с {status: 'error'} раскомментирован и наоборот, чем вставка не будет выполнена, и новая строка будет удалена автоматически.
успех просьбу если оператор return имеет этот код состояния {status: 'ok'} работает все будет идти гладко и данные будут вставлены.
Проблема № 2: Категории Не Работают
категории не были выбраны потому, что в $scope.showCategories = function вы используете {value: user.category_id} category_id где как должно быть {value: user.category}.
Проблема № 3: Удалить тоже не работает.
Delete не работает, потому что в вашем 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);
}
}
на 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-редактируемым, но вы можете получить то, что хотите, сделав кнопку отмены ng-click действие быть функцией на $scope делает очистку на вашем users список, тогда $cancel действия в X-редактируемый API, который он в настоящее время делает.
если по какой-то причине вы против того, чтобы он был в вашей таблице вообще, пока он не будет в БД, то вы, вероятно, захотите сделать addUser() заполните временную переменную пользователя, имейте cancel кнопка обнуляет эту переменную, и ваш HTML показывает эту строку, только если переменная установлена.