I have the following code
<tr>
<th ng-click="predicate='-name'; reverse=false;">Name</th>
<th ng-click="predicate='age'; reverse=true;">Age<th>
<tr>
<tr ng-repeat="user in users | orderBy:predicate:reverse">
<td>{{user.name}}<td>
<td>{{user.age}}</td>
</tr>
My aim here is whenever i click on the table header, then the corresponding column has to be sorted based on particular predicate and reverse. And that is happening perfectly. But I have a scenario where, when i click on an external object, then my age value in table changes here and hence as a result the table sort order is getting disturbed. But i don't want sort to get disturbed. How can i skip table to not obey sort on other actions and have it only on click of table column headers? Can anyone help me with this?
I don't think this is possible. Whenever "users" changes, Angular will notice (since that scope property (i.e., "users") is bound (one-way data binding) to the ng-repeat directive), and Angular will update the view.
Related
I have a html table
<table>
<tr ng-repeat="row in rowsproductrequests">
<td>{{row.PRODUCTID}}</td>
<td>{{row.DESCRIPTION}}</td>
</tr>
</table>
a second table for search products :
<table>
<tr ng-repeat="row in searchproductsList">
<td>{{row.PRODUCTID}}</td>
<td>{{row.DESCRIPTION}}</td>
</tr>
</table>
On click I am pushing the item from the search table (Second table) to the main table (first table) :
JS:
$scope.addItemAsIng = function(row){
$scope.rowsproductrequests.push(row);
}
The items are pushed. My problem is how can I check if an item exists in the first table so I can stop pushing the same item twice.
Use includes, for example:
$scope.addItemAsIng = function(row){
if(!$scope.rowsproductrequests.includes(row)) $scope.rowsproductrequests.push(row);
}
An alternative approach
Rather than populate the second table by pushing selected items to a second array, I'd suggest using the same array but send it through a custom filter that identifies which items are selected.
How to do it
1) Create a function in your controller that sets the selected property of a given object to true:
$scope.onAvailableRowClicked = function(row){
row.selected = true;
}
2) Then wire that up to the first table (of available objects) using the ng-click directive:
<h4>Available</h4>
<table>
<tr ng-repeat="row in rowsproductrequests"
ng-click="onAvailableRowClicked(row)">
<td>{{row.PRODUCTID}}</td>
<td>{{row.DESCRIPTION}}</td>
</tr>
</table>
3) Now create a custom filter that identifies all of the objects within a given array that have the selected property set to true:
app.filter("isSelectedFilter", function() {
return function(input){
return input.filter(function(obj){
return (obj.selected === true);
});
}
});
4) Finally, use the filter in the ng-repeat of the second table to identify selected records:
<h4>Selected</h4>
<table>
<tr ng-repeat="row in rowsproductrequests | isSelectedFilter">
<td>{{row.PRODUCTID}}</td>
<td>{{row.DESCRIPTION}}</td>
</tr>
</table>
Benefits of this approach
You only have to maintain one array. Less variables means that your code becomes easier to read, you can see more easily what is driving the view. It's also easier to debug if things go wrong.
There's only ever one instance of each object. One source of the truth means that there's no danger of objects falling out of sync ("should I use this or that!?!?"). It also means that it's not physically possible to select an object more than once.
You can easily reuse the selected property in other parts of the view. If you wanted to highlight in the available list which objects had been selected, you could do so easily using ng-class for example. (The thought of using array comparison logic here is already giving me a headache!)
Demo
CodePen: A custom filter to identify selected records
Approach One: One solution will be once you add the row from the second table, remove that item from the collection and add to the first table that,s how you will never get duplicate items.
Second Approach: you will have to maintain an identity column in both tables based on these identity columns you need to check before adding whether this item exists.
Also you can use "indexOf()", it will return array index of your current item, if not exit it will return -1
Like
if($scope.rowsproductrequests.indexOf(row) != -1)
I have two table, table 1 and table 2.. Table 1 has a field count. based on the count value(count value= no of rows populated), rows should be automatically populated in table 2. I am new to angularjs. Please let me know how can acheive this
To render values in your table you can use ng-repeat directive.
You can use things such the ngIf, ngShow and ngHide directive to hide or show DOM objects based on an expression, or use ngRepeat to dynamically add additional DOM object based on a growing or shrinking array in your controller.
My guess is you're looking for an visibility directive, so I think the following might help:
<table id="table1">
<tr data-ng-repeat="row in table1">
<td>{{row.someData}}</td>
</tr>
</table>
<table id="table2" data-ng-show="table1.length == 0">
<tr data-ng-repeat="row in table2">
<td>{{row.someData}}</td>
</tr>
</table>
Note that both tables are filled with an ngRepeat by using corresponding arrays from your controller as a source. On the second table, you can see an ngShow directive with an expression that says: "if table1 is empty, show me".
I hope this helps.
I followed all the steps described in the docs, I installed smart-table via bower, then I ref the script at index.html, then I added the module to one of my sub-modules, and I created my table:
<table st-table="vm.product_conditions" class="table">
<thead>
<tr>
<th st-sort="name">Nombre</th>
<th st-sort="description">Descripcion</th>
<th st-sort="status">Estado</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="condition in vm.product_conditions track by condition.id"
ng-click="vm.detailProductCondition(condition.id, condition.name)">
<td>{{ condition.name }}</td>
<td>{{ condition.description }}</td>
<td>{{ condition.status ? 'Activa' : 'Inactiva' }}</td>
</tr>
</tbody>
</table>
The table gets populated, but whenever I click on the column in order to sort it, the table gets empty, I also tried to implement the global search, and the same result, empty table...
Also, I get no error output, I tried to reproduce the error in a plunker, but to my surprise It worked there...
Is there any way to debug it?
Are you loading data asynchronous? If you are, you will need to have two collections, one that is the displayed collection and the other that contains all the items for the table.
Smart Table has a data attribute for st-safe-src.
The only way that I believe your tables would return a blank result, is if the product_conditions collection is somehow being interpreted as blank or undefined.
I would attempt to log out the collection to the console, before and after sorting the table and confirm if the collection is the same.
Reason why (from the documentation):
smart-table first creates a safe copy of your displayed collection: it
creates an other array by copying the references of the items. It will
then modify the displayed collection (when sorting, filtering etc)
based on its safe copy. So if you don't intend to modify the
collection outside of the table, it will be all fine. However, if you
want to modify the collection (add item, remove item), or if you load
your data asynchronously (via AJAX-Call, timeout, etc) you will have
to tell smart-table to watch the original collection so it can update
its safe copy. This is were you use the stSafeSrc attribute
I'm attempting to build an import for our system. I accept an excel file, parse it within a web api into a data table object (number of columns and rows is unknown). I send the data table via json back to my angular app. After a user maps the columns to fields in our database, I then take the data table, pass it back to an api.
The problem is when I pass the table back to the api, any changes I've made to the data isn't applied. It's as if ng-model isn't working
<table>
<tr ng-repeat="row in dt track by $index">
<td ng-repeat="col in row">
<input type='text' ng-model="col" />{{col}}
</td>
</tr>
</table>
Visually this produces exactly what I want. The {{col}} visually shows me that typing different data shows me ng-model must be updating, because {{col}} always shows the value inside the text box
But when I pass my data table to the api, it contains all the original values
ng-model="col" sets the value of col, which is a copy of what is in row[$index]. To update the value which in row, use ng-model="row[$index]".
The model returns a list of beans which are displayed in a table using <c:forEach tag>. Some properties are of type input, so the user can edit these inline (optional).
The question is how to set a corresponding beanObject[by row index] when user clicks on checkbox? If clicked, then the appropriate bean needs to be updated via AJAX, I think.
So, how can we do that?
Normal Master-Detail approach has way too many clicks, that is why I need "update-able" tables.
Controller:
return new ModelAndView("daily","daily", dailyListOfBeansRecords;
Jspx:
form submit...
...
<c:forEach var="week" items="${Daily}" varStatus="loopIteratorValue">
<tr class="${loopIteratorValue.index % 2 == 0 ? 'd4' : 'd3'}">
<td><checkbox id="present" onchange="ProcessedUpdated(this,${loopIteratorValue.index})" value="${week.processed}"/></td>
</tr>
</c:forEach>
It seems to me you totally misunderstand jsp. jsp(x) is executed on the server side. you need javascript to do client-side processing.