assigning id to new added object in ngrepeat - angularjs

i am using Xeditable Angular,
Working fine.
The issue is when i added a new data as a new row to table. and i made a ajax call to server, server saved it, and returned new id, i want to assign this id to the new added model. how i do that.
When i added a new item, it added instantly to model by xeditable, its fine, but its id field is null, i want to change the null to the return value from server. how select the item of last edited by its track by id
<tr ng-cloak ng-repeat="school in results = (content.data | filter: content.search | orderBy:sortType:sortReverse | offset: (content.currentPage-1) * content.pageSize | limitTo: content.pageSize) track by school.id">
<td><input type="checkbox" ng-model="content.deleteList[school.id]" ng-checked="content.head"></td><td>{{school.id}}</td> .......................................
Only part of desplayed

What you can do is update the id when you get a reply form the server :
$scope.addData = function(user) {
yourFactory.addData(user).then(function(result) {
user.id = result.data.id;
});
}
I may be able to help you better if you provide more code

Related

Angular - Remove a row after filtering a table

I have a table with filter's like :
ng-repeat="person in filtered = ( data | filter:query | filter : name | filter {m_resource: resourceFilter} | filter : {m_id : idFilter} | limitTo:maxRowSize )"
And inside the table as part of each row, I have a delete button:
<button class ="btn" ng-click="removeRow($data, $index, this)">del</button>
when clicking on the button I want the row to be removed from the UI, without using any filter I just use splice:
$scope.data.splice(index, 1);
But when I am applying filter it wont work beacuse the index(numer of the row in the displayed table) is the UI index not the data index.
Anyone know's how to delete a row after filtering?
Try this,
<button class ="btn" ng-click="removeRow(person)">del</button>
In your removeRow function,
var index = $scope.data.indexOf(person);
$scope.data.splice(index, 1);

AngularJS always including an object in an ngRepeat filter

I want to always include certain objects that have a specific property value, regardless of the active filter.
Example Description: I am filtering by 'status: Production', which will list only employees whose status is in production. I edit an entry and save it, that object now has the saving property set to true. If I change the filter to status: Offboarded that entry will now be filtered out. I want to keep any objects with the saving: true property unfiltered.
Example Filter:
<tr ng-repeat="employee in employeeData | filter:{status: queries.status}
| filter:{duties: queries.duties}
| filter:queries.generalQuery">
I want to always include any employee who's saving property is true. How can I do this?
You could do this with a single filter function.
<tr ng-repeat="employee in employeeData | filter: filterEmployees">
And your filter function would be something like this:
$scope.filterEmployees = function(employee) {
if (employee.saving) return true;
// rest of the filtering...
}

Strange bug with ng-repeat and filter

I'm using NodeJS, ANgularJS, and MongoDB with mongoose
Here is my model :
var PostSchema = new mongoose.Schema({
nomReseau : String,
corps : String,
etat : String,
section : String
});
I got a function that change the attribute etat:
$scope.passer = function(index){
var post = $scope.posts[index];
post.etat = "enCours";
Posts.update({id: post._id}, post);
$scope.editing[index] = false;
}
I'm using a ng-repeat for show object in my database :
<ul>
<li ng-repeat="post in posts ">
<p>
<a ng-show="!editing[$index]" href="#/{{post._id}}">{{post.corps}}</a>
</p>
<button ng-show="!editing[$index]" ng-click="passer($index)">Passer</button>
</li>
</ul>
I can see all post in my database and when I click on the button this works perfectly the attribute etat change and all is fine.
But when I add a filter in the ng-repeat like this :
<li ng-repeat="post in posts | filter:{ etat:'aTraiter'} ">
The filter works great I have all post with the attribute etat:'aTraiter'
But if I click on my previous button and change the attribute etat nothing change and I try with other functions they all work wihout the filter but when I put it nothing work.
The problem is that $index will change if less data is shown (because you're filtering). you could use directly post variable
ng-click="passer(post)"
and your function should be something like
$scope.passer = function(post){
post.etat = "enCours";
Posts.update({id: post._id}, post);
var index = $scope.posts.findIndex(function(p) { /* comparison to get original index */ }); /* keep in mind findIndex is not supported on IE, you might want to use filter or for loop instead) */
$scope.editing[index] = false;
}
you could handle editing in the post variable directly. So in your passer function you can do this
post.editing = false;
and in your view
ng-show="!post.editing"
this way you won't use $index and you will prevent all issues with being updated by filters
There are bugs in AngularJS v1.4 where in certain situations the ng-repeat breaks. I upgraded to v1.6 and it went away.
Do you have any controllers/services that access $scope.editing? If so, you might be setting the $scope.editing[$index] equal a previous state where it wasn't equal to false. You may also want to consider that you are assuming $scope.editing[$index] is going to be a boolean. if it has any other type such as string or number then it will evaluate to true.
Otherwise none of your results have the attribute etat equal to 'aTraiter' so they aren't showing. Have you verified that any of them actually do have etat equal to 'aTraiter'. You might be changing that value somewhere else. Possibly from the Passer function

Sort by function, on angular js, clicking header table

I'm attempting to learn angular. I've been using the default hr schema from Oracle and I'm using a web API to bring back the employee collection and the department collection.
I'm rendering an HTML table to display the employee info. For the department column I have a function that takes the emp.department_id, does a lookup on the department collection and returns the department name.
I have headers on the table that when clicked sort the table in ascending or descending.
However I'm struggling with the sort on the department name column since department name is not actually a field on the employee collection. I tried to sort by the function I was using to get the value but I'm not quite getting it.
In my controller I have the following function to get the department name:
$scope.getDeptName = function(id){
for (var i=0; < model.departments.length; i++{
if(model.departments[i].department_id == id){
return model.departments[i].department_name;
}}}
My table headers:
<tr><th><a href="#" ng-click=orderByField='last_name'; reverseSort =! reverseSort>Name</a><th>
<th><a href="#" ng-click=orderByField='getDeptName(department_id)'; reverseSort =! reverseSort>Dept Name</a><th></tr>
<tr> ng-repeat="emp in model.employees |orderBy:orderByField:reverseSort">
The sort by Department Name is not working, I'm unsure how to sort by the function.
The orderByField must be set to the function allowing to get the name of the employee. Not to a string containing a call to this function. The correct way is thus
ng-click="orderByField = getDeptNameFromEmployee"
which, in JS, is equivalent to
$scope.orderByField = $scope.getDeptNameFromEmployee;
But beware: getDeptNameFromEmployee must take an employee object as parameter, and not an employee ID, for this to work. So it should look like
$scope.getDeptNameFromEmployee = function(employee) {
return $scope.getDeptName(employee.deptId);
};
Take the quotes off the function call:
<a href="#" ng-click=orderByField='getDeptName(department_id)'; reverseSort =! reverseSort>Dept Name</a>
should be:
Dept Name

Angular JS Filter On date

I was wondering if anyone could help me with filter on dates within ng-repeat
I have a text field that I enter the search text into for filter the results in my table
take this cut down example`
<tr id="credentialsData" ng-repeat="credential in credentials.data | filter:credentialsSearchText">
<td>{{credential.createdDate | date:'medium'}}</td>
</tr>`
credential.createdDate comes back in the rest call in the format 2015-03-24T21:19:49Z
When I attach the medium date filter - it displays as Mar 24, 2015 9:19:49 PM
However when i search on the String Mar or 9:, I get no results. Angularjs searches on the base object and ignores the filter.
I have read other options online where the person recommends adding different date formats into the json object but unfortunately that is not an option for me
Any help on this would be appreciated
Cheers
Damien
You can use a custom function for the filter.
https://docs.angularjs.org/api/ng/filter/filter
<tr id="credentialsData" ng-repeat="credential in credentials.data | filter:credentialsSearchText:compareCredentialDate">
<td>{{credential.createdDate | date:'medium'}}</td>
</tr>
In your controller, put a
$scope.compareCredentialDate = function(credential, expected) {
// you have to inject '$filter' to use this:
var dateFilter = $filter('date');
// this is the value that "credential.createdDate | date:'medium'"
// evaluates to:
var formattedDateString = dateFilter(credential.createdDate, 'medium');
// hypothetical matching method - you can implement whatever you
// want here:
var isMatch = formattedDateString.indexOf(expected) >= 0;
return isMatch;
}

Resources