We Keep Coding

Angular Dragula: How to get a update sort list on save button after drag and drop

I am fetching list of posts with sort order from Database and binding with table using ng-repeat of rows. I set them up so you can reorder them with drag-and-drop using Angular Dragula. This works fine.
After dragging, Whenever I click on save button I should get Updated Sort Order, So that I can update it on Database.
Before Drag:
Let Suppose post_sort_order:1,2,3,5
After Drag :
post_sort_order: 4,2,3,1
HTML:
<tbody md-body ui-sortable >
<tr md-row>
<td>
<div dragula-model="vm.GroupData.groups" class="drag-container" dragula='"drag-container"' layout="column" layout-xs="column" layout-align="space-between" layout-margin>
<tri-widget ng-repeat="order in vm.GroupData.groups" flex title="{{::order.group_name | triTranslate}}" title-position="top" palette-background="blue-grey:600" background="primary"></tri-widget>
</div>
</td>
</tr>
</tbody>
Javascript:
Result: vm.GroupsData.groups:
Now, Once I click on Save button, I should get updated sort list like here 4,3,2,1.
Actual post_sort_order: 1,2,3,5
Expected post_sort_order:3,1,5,2
Is there a way to get updated list ?If yes, Please let me know.
Thanks in advance.

How to make table in VueJs and add values being recieved by MSSQL database in .NET Core web application

I'm creating a table inside a .NET Core Web Application with several rows and columns and the contents are being called using MSSQL server with a WEB API
Since I have more than one row and column, I need a for loop inside my <div> tag
This is what I was able to find.
v-for="(FirstName, LastName, UserID) in tableData>

If you are attempting to loop over multiple values from the tableData, you can destructure it like this:
<tr v-for="{FirstName, LastName, UserID} in tableData" :key="UserID">
<td> {{FirstName}} </td>
<td> {{LastName}} </td>
<td> {{UserID}} </td>
</tr>
However, your question does not seem clear.

Your question isn't very narrative. But if you are looking to loop over the result of your query and generate your rows dynamically:
<tr v-for="user in tableData" :key="user.id">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
The properties depending on the rows you have in your tables & the rows you want to return (.id, .name, .email are just examples here)

Angularjs ui operations tend to be slow when there are more elements in a ng-repeat

I have a application where more than two thousand records are loaded in to the scope and there is checkbox for every element. I have noticed that there is a huge delay between clicking and the input box getting selected. I have read that angular tends to be slow when the number of watches increase. Its not possible for me to have a paginate as i have implemented the search using angular filters and i need to search all the records at once. I know that the best way is to search in the sever and return the results. but for now is there any way to improve the performance even by a little bit.
<tr dir-paginate="document in archivedocuments| ArchiveDocumentViewFilter:documentView |ArchiveDocumentViewByChapterTagIdFilter:chapterTagId | orderBy:predicate:reverse|ArchiveDocumentsFilter:archiveDocumentsSearch| itemsPerPage: 10"
pagination-id="archiveDocsPag" ng-class="document.ProjectStatus != 3 ? '' : 'document-closed'">
<div cg-busy="{promise:archiveDocumentsPromise, templateUrl:'/app/modules/common/ui/fliploader/fliploader.html' ,backdrop:true, message:'Loading...'}">
<td class="text-center table-header-link">
<!-- Squared FOUR -->
<div class="squaredFour">
<input type="checkbox" value="None" name="checkboxfordocuments" ng-model="document.checked" ng-click="checkSingleArchiveDocument()"
/>
</div>
</td>
i have also added the my code as per the request archivedocuments can be more than 10,000
Thanks,

Compound filtering with pagination AngularJs

In an angular application I am working on I am trying to use compound filtering in conjunction with pagination. There will be a table with x entries, each row with three columns. I have an input above each column where the user can filter the columns based on input text. The filters compound to narrow down the results to the best - but in my use case there still might be too many to display on one page, therefore I am trying to use pagination.
The table body looks like this:
<tbody>
<tr>
<td class="col-md-4">
<input type="text" ng-model="nameFilter" class="form-control" placeholder="Name">
</td>
<td class="col-md-4">
<input type="text" ng-model="ageFilter" class="form-control" placeholder="Age">
</td>
<td class="col-md-4">
<input type="text" ng-model="stateFilter" class="form-control" placeholder="State">
</td>
</tr>
<tr data-ng-repeat="person in people | filter:{'name': nameFilter} | filter:{'age':ageFilter} | filter:{'state':stateFilter} | limitTo: itemsPerPage">
<td class="col-md-4">{{person.name}}</td>
<td class="col-md-4">{{person.age}}</td>
<td class="col-md-4">{{person.state}}</td>
</tr>
</tbody>
The tricky part I am having is getting the pagination to work with the filters applied. I have seen an example like this one where the author uses a $watch on a singular search field and can still manage pagination. I also have seen through research there is a $watchCollection that can be used, but am not sure how to implement it.
$scope.$watchCollection('[nameFilter, ageFilter, stateFilter]', function(newValues) {
//not sure what to do here.
console.debug(newValues);
$scope.filtered = '';; //really it should equal the now filtered by 3 filters group of people
$scope.noOfPages = Math.ceil($scope.filtered.length/$scope.itemsPerPage);
});
Are watches even the best choice to use in this case? I have this working plunker as an example of what I am working on, but still need some guidance with the pagination. One of the questions I do have is I am not sure how to make the pagination apply specifically with the list of data. I have seen other examples and have mimicked but I think the filtering might be messing it up (not sure)? Any help appreciated.

You don't have to watch for the filters. You only need to bind the filters to your pagination. This way angular will handle everything and you don't need to write additional code in the controller. I updated your plunker and you can see how is everything is implemented with angular bindings.
Also you have limitTo filter that handles pagination
<tr data-ng-repeat="person in people | filter:{'name': nameFilter} | filter:{'age':ageFilter} | filter:{'state':stateFilter} | limitTo: itemsPerPage: (currentPage - 1) * itemsPerPage">
<td class="col-md-4">{{person.name}}</td>
<td class="col-md-4">{{person.age}}</td>
<td class="col-md-4">{{person.state}}</td>
</tr>
<ul uib-pagination
total-items="(people | filter:{'name': nameFilter} | filter:{'age':ageFilter} | filter:{'state':stateFilter}).length"
items-per-page="itemsPerPage"
boundary-links="true" ng-model="currentPage"></ul>
https://plnkr.co/edit/5bW3XV3eEmomOtHJWW7x?p=preview

Nested ng-repeat with dynamic input

I am trying to display a JSON response in a table using ng-repeat. The problem is that not all objects recieved are the same. All of them have a date, short message and long message. There are also ones with an additional value list, differing in length. This list should be diplayed underneath the long message within its own table or list. I use the alert.slice().reverse() because I want the newest entries to be on top. The new objects are inserted using .push({values}).
<tbody class="AlTbody" ng-repeat="alerts in alerts.slice().reverse()" ng-class="className">
<tr class="Altr Aldate">
<td ng-show="{{alerts.Date}}"><b>{{alerts.Date}}:</b>
</td>
</tr>
<tr class="Altr Alshort " ng-click="toggleDetail($index)">
<td>{{alerts.S}}</td>
</tr>
<tr class="Altr " ng-show="activePosition == $index">
<td class="msgL">{{alerts.L}}
<!-- 1) <p ng-show="{{item.List}}"><br><ul><li>Previous values:</li> <li ng-repeat="vals in ValueList">{{vals.value}}</li></ul> </p>-->
<!-- 2) <p ng-show="{{List.txt}}"> <br><ul><li>Previous values:</li> <li ng-repeat="List in alerts.List">{{List.txt}}</li></ul> </p>-->
</td>
</tr>
</tbody>
I already tried two approaches as seen in the code. The first one displayed the list correct however it was displayed underneath every long message instead of only the one it belongs to. I used a new variable.
var l=valList.length;
scope.List=true;
while(l>-1){
scope.ValueList.push({value: valList[l]});
l--;
}
The second approach did not work at all because I could not find an index.
var l=valList.length;
var indexV= jQuery.inArray(currdate,scope.alerts.Date);
while(l>-1){
scope.alerts[indexV].List.push({txt: valList[l]});
l--;
}
edit:
This is the current output. There you can see two objects( date, short message and long message) and both of them have the previous values section. However only the upper object is supposed to diplay the list of previous values.

What you are trying to achieve is entirely possible, my advice is to start at a known point and work from there.
I have put together a jsfiddle to show you how nested ng-repeats will work. try and work from that point. As a side note it looks like your JSON structure is overly complex, if you can simplify that down I would.
https://jsfiddle.net/roscorcoran/wyu7tgxm/
<div ng-app="App" ng-controller="Ctrl1">
<div ng-repeat="alert in alerts">
<a ng-if="alert.Date">{{alert.Date}}</a>
<p ng-repeat="val in alert.L.vals">
<a ng-if="val && val.value">{{val.value}}</a>
</p>
<p ng-repeat="item in alert.List">
<a ng-if="item && item.txt">{{item.txt}}</a>
</p>
</div>
</div>

You can try to add a ng-if statement inside the ng-repeat loop:
<p ng-if="{{values.list}}"><br><ul><li>Previous values:</li> <li ng-repeat="vals in values.list">{{vals.value}}</li></ul> </p>-->

Okay so this works for me now. It still always displays "Previous Values:" but the values only display when they actually belong to the message.
<ul ng-if="alerts.List.vals"><li>Previous values:</li> <li ng-repeat="val in alerts.List.vals" >{{val.value}}</li></ul>
This might not be the best and most elegant solution but it works.
if(valList){
scope.alerts.push({Date:currdate,S:msgSn,L:msgLn, List:{ vals:[{value:valList[0]},{value:valList[2]},{value:valList[4]},{value:valList[6]}] } });
}else{
scope.alerts.push({Date:currdate,S:msgSn,L:msgLn });
}
I only display the even indexes of the value array because the list of values was a string which I split and every uneven entry is "):" which I don't need to display.