Transferring data to a table (array) until success in the xeditable table of angular values

Question

I want to insert the added data into the table only after the successful completion of the mail request, but it will add before checking the mail request. So, how do I insert table row data only after success.

Also, showCategories (categories derived from api) doesn't work, but gender (getting from local) works. In the selection box (the category data parameters are shown), but I cannot select the category data. I used the same thing as the gender selection field, but the gender selection field works, but is not a category. Where did I make my mistake?

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> 

and controller

 .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 data for users

  {"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"}]} 

Can anybody help me. thanks in advance

Answer 1

---

So, when I saw the plunker yesterday, it had 4 problems. and I fixed them all. Plunker works and tested here , also read the following to understand what exactly is wrong.

---

Problem # 1: entering data into tables before requesting success

The data was inserted before the response of the $http.post request, since xeditable automatically saves the weather of the data, the status code behind the scenes is 400 or 200. In the case of the status code 400 (failure), the inserted element will be deleted from the front table, and if successful, the request will be processed optional. I used Angular -Mocks to intercept the request for $http.post('/saveUser', data) , because it does NOT exist in real time on the plunker.

How to check if this really works:

Mail request interception:

 app.run(function($httpBackend) { $httpBackend.whenPOST(/\/saveUser/).respond(function(method, url, data) { data = angular.fromJson(data); //return [404, {status: 'error'}]; return [200, {status: 'ok'}]; }); 

above, this is the code to intercept the http.post request. I installed two return statements, only one of them should be left without comment.

Request failed : If the instruction with {status: 'error'} uncommented, and vice versa, if the insert is not executed, and the new line will be deleted automatically.

Request Success If a return statement with this status code {status: 'ok'} works, everything will go smoothly and data will be inserted.

---

Problem number 2: Categories do not work

Categories were NOT selected because in $scope.showCategories = function you used {value: user.category_id} category_id, where it was supposed to be {value: user.category} .

---

Problem number 3: Delete does not work.

Delete does not work because in your HTML you pass the user the deleteUser function as follows:

 ng-click="deleteUser(user) 

Where it should have been:

 ng-click="deleteUser($index) 

---

Issue 4: On Cancel An empty row is inserted.

When a new row is added and then pressed, it leaves an empty row in the table. therefore, I wrote a new function for performing both canceled tasks (Cancel for New Insertion) and (Cancel for Edited Data). You can add additional checks to this function, but there is a basic idea.

Here is a function that either deletes a newly added row, or cancels a click or edits an old record and clicks cancel.

 $scope.cancelit = function(rowform, index) { console.log(rowform, index); if(rowform.$data.name !== '') { rowform.$cancel(); } else { $scope.deleteUser(index); } } 

---

Answer 2

categories problem:
The ideal situation is for your server to handle the connection of the user table and category list. The server's task is to provide your interface data in a decent format. In the end, the server must be much more powerful than the user's computer. You just need to call {{users.category}} . But suppose this is not possible for any reason. Now you need to scroll through the categories list to find where user.category === category.value :

 $scope.showCategories = function(user) { angular.forEach($scope.categories, function(category) { if(user.categories == category.value) { return category.value; } } }; 

Unsaved string problem:

This is more of a display problem than a stream problem. You do not need your user list to be updated only after the server, you just want it to accurately reflect what is on the server. I am not familiar with x-editable, but you can get what you want by making the cancel ng-click action button function with $scope , cleans up your users list, and then does the $cancel action in the x-editable API, which it currently doing.

If for some reason you do not encounter this at all in your table until it appears in the database, then you probably want to make addUser() fill in the temporary user variable, click the cancel button, and your HTML shows this line only if the variable is set.