I have a requirement to make select/deselect all checkbox in a table using angularjs. I googled it but in all solutions they are using array and ng-repeat in angularjs. I cant use those solution bcz i am retrieving records from database and printing in a table with checkbox on each row.
I got a solution in jquery but i dont know to convert it to angularjs.
Below is the html table with jsp.
<thead>
<tr class="active">
<th><input type="checkbox" id="selectall">Select_All</th>
<th>Product</th>
</tr>
</thead>
<tbody>
<% ParametersIterator it=res.getIterator();
String prod="";
int i=0;
while(it.hasNext())
{
Parameters p=it.next();
prod=p.get("product");
String id=p.get("id");
%>
<tr>
<td>
<input type="checkbox" class="case" name="case" value="<%=id%>">
</td>
<td><%=prod%></td>
</tr>
<%}%>
</tbody>
below is the Jquery code
<script language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");alert("t");
} else {
$("#selectall").removeAttr("checked");alert("f");
}
});
});
</script>
Pls help me in converting to angularjs
Here is a plunker demonstrating a table with checkboxes, populated with data loaded from a 'server/database', with buttons to select/deselect all checkboxes. There's really no reason not to use ng-repeat with this.
HTML:
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="row in data">
<td>{{row.key}}</td>
<td><input type="checkbox" ng-model="row.value"></td>
</tr>
</table>
<button ng-click="applyValues(true)">Select all</button>
<button ng-click="applyValues(false)">Unselect all</button>
JS:
$http.get('data.json')
.then(function(res) {
$scope.data = res.data;
})
$scope.applyValues = function(val) {
angular.forEach($scope.data, function(row) {
row.value = val;
})
}
https://plnkr.co/edit/oaDnx1kM2Zl6mtZG5Eis?p=preview
Version with a single 'Toggle all' button:
https://plnkr.co/edit/jsQuACzGSlPBok1LEPLF?p=preview
If you can get your data via $http.get('data.json') as Fissio suggested, that's definitely the way to go. However, if you need to render the page on the server, it can still be done.
Here is a plunker example without ng-repeat.
Related
I'm doing a simply project on intellij with spring boot and i did a table with an input for the searches. What I want is to show a message whene the search fails and no results are found. How can I do it?
This is my table:
<div>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="tablePatients" width="100%" border="1px solid black" class="table table-striped">
<thead class = "thead-dark">
<tr>
<th>Id</th>
<th>Nome</th>
<th>Cognome</th>
</tr>
</thead>
<tbody id="mytable">
<tr th:each="patient : ${allPatients}">
<td th:text="${patient.id}">1</td>
<td th:text="${patient.name}">w</td>
<td th:text="${patient.surname}">e</td>
<td> show </td>
<td> add prescription </td>
</tr>
</tbody>
</table>
</div>
And this is the script I use for the research:
<script>
$(document).ready(function () {
$("#myInput").on("keyup", function () { //here #input textbox id
var value = $(this).val().toLowerCase();
$("#mytable tr").filter(function () { //here #table table body id
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
The question is, how can you do that in the templating engine you use. It's not really a Spring question, or HTML or JavaScript for that matter.
You should be able to check if allPatients is empty and then render something. If you use thymeleaf and want to do it server side:
<tr th:if="${#lists.isEmpty(allPatients)}">
<td>no patients found...</td>
</tr>
<tr th:each="patient : ${allPatients}">
...
If you want to do it in the JavaScript logic, you posted, which looks like it uses jQuery, do something like this:
after filtering the rows, check if the result is empty
if so, add another row to render the empty message, e.g.:
$('#mytable').append('<tr id="empty-message"><td>no patients found...</td></tr>');
if the result is not empty, remove #empty-message
Alternativley, you can always add the row, but use show() and hide() insteaf of append and remove.
On this website (Built with Wordpress) I have a table of content with some checkboxes filters on top that allows users to filter the table by price, rooms etc...
The following JS script, related to the checkboxes, is not working properly anymore. (I just post a small part because is the same for the different checkboxes).
<script>
$(document.body).on('change', "#checkboxID", function() {
$("#tableID tr.rowEG").toggle(!this.checked);
});
$(document.body).on('change', "#checkbox1OG", function() {
$("#tableID tr.row1OG").toggle(!this.checked);
});
$(document.body).on('change', "#checkbox2OG", function() {
$("#tableID tr.row2OG").toggle(!this.checked);
});
$(document.body).on('change', "#checkbox3OG", function() {
$("#tableID tr.row3OG").toggle(!this.checked);
});
</script>
This is part of the HTML related to the table of content:
<div class="tabelle" id="wrap">
<table class="table" id="tableID">
<thead>
<tr>
<th>Wohnung
Apartment</th>
<th>Zimmer
Rooms</th>
<th>Stockwerk
Floor</th>
<th>Haus Nr.
House No.</th>
<th>Nettomiete
Net Rent</th>
<th>Bruttomiete
Gross Rent</th>
<th>PDF</th>
</tr>
</thead>
<tbody>
<tr class="row1 row1OG row2OG row3OG zimmer3 zimmer2 zimmer5 range1
range2 range3 range5 haus2 haus3 haus4 haus5 haus6 haus7 haus8 haus9 haus10
haus11 haus12 haus14 special1">
<td>1.0.1</td>
<td>4.5</td>
<td>EG</td>
<td>1</td>
<td>2120</td>
<td><span style="color: #ff0000;">vermietet</span></td>
<td><a target="_blank" href="/table/pdf/Haus_1/1.0.1.pdf" rel="noopener
noreferrer"><img alt="" src="/img/pdf.png" /></a></td>
</tr>
</tbody>
</table>
</div>
Any suggestion on how to fix it?
Thanks a lot for your help
First you have a couple errors in your js - you no longer have a div called wrap, and that causes your js to fail here - https://i.imgur.com/eJMPBz1.png
The code within your change listener works fine - I believe they are just not getting registered. Try changing it to:
$("#checkbox2OG").change(function() {
$("#tableID tr.row2OG").toggle(!this.checked);
});
I have table displayed with checkboxes in each row like this-
Html code : -
<table>
<tr>
<td><input type= "checkbox"></td>
<td>Name1</td>
<td>Role1</td>
</tr>
<tr>
<td><input type= "checkbox"></td>
<td>Name2</td>
<td>Role2</td>
</tr>
<tr>
<td><input type= "checkbox"></td>
<td>Name4</td>
<td>Role4</td>
</tr>
<tr>
<td><input type= "checkbox"></td>
<td>Name3</td>
<td>Role3</td>
</tr>
</table>
I also have a button 'Sort'. When I click on the button sort, all those rows which have checkboxes as checked should be displayed first and all other rows after them. The result would look something like this -
How can this be implemented?
Using jquery you can parse each <tr> and check if their child checkbox is check then add them to a new table as first or last child. then replace the old table with the new one.
$(document).ready(function(){
$('#sort').on('click', function(){
var newTable = $('<table class="table"></table>');
$('.table').find('tr').each(function($index, $value){
if($(this).find('input[type=checkbox]').is(':checked')){
newTable.prepend($(this));
} else {
newTable.append($(this));
}
});
$('.table').replaceWith(newTable);
});
});
this should work but i havn't tested it yet.
Hopes it helps !
Nic
You can use sort() and is(':checked') to sort rows and then empty table and append sorted content. DEMO
var sorted = $('table tr').sort(function(a, b) {
if($(b).find('td:first-child input').is(':checked')) {
return 1;
} else {
return -1;
}
})
$('button').click(function() {
$('table').empty().html(sorted);
})
please try this
$('input').each(function(e,i){
if(!i.checked){
var tr=$(i).closest('tr');
$(tr).parent().append($(tr).remove());
}
});
I have a table in Angularjs that has a checkbox in each row. When the checkbox is clicked, I would like an alert function to be launched to display the content of the row being clicked. The problem I face is how can the alert function access the data content of the row?
The table in html looks like this;
<table class="table table-hover data-table sort display">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Checkbox Alert</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in filteredList | orderBy:columnToOrder:reverse">
<td>{{item.name}}</td>
<td>{{item.location}}</td>
<td> <input type="checkbox" ng-click="alert_display()"> </td>
</tr>
</tbody>
</table>
The controller code looks like this;
$scope.alert_display = function()
{
alert("Testing");
};
I would like alert_display() to display the contents of {{item.name}} and {{item.location}} of the relevant row.
Do the following:
<input type="checkbox" ng-model="selected" ng-change="display(selected, item)">
your JS code:
$scope.display = function(selected, item) {
if(selected)
alert(item.name + ' ' + item.location);
else
// do sth else
}
Here is the fiddle: http://jsfiddle.net/HB7LU/4156/
OK, so I want to create a dynamic nested hierarchy of tables. I get they data no problem, but using ng-repeat at each level causes the parent table to insert child data for a specific row into each row of the parent table. I want to prevent this, I have tried using ng-repeat-start and ng-repeat-end, however, because of the table nesting I cannot add the end tag in an appropriate place to stop the repeat.
UPDATE
Let me clarify a bit here, I have 3 nested tables, the top level table has list of groups, the first child table is a list of all of the items that belong to a specific group in the parent table. When the user clicks the expand button, I populate the child table based on which row in the parent table was clicked, this is OK, however the child table now shows up in each of the parent table rows instead of just the row that was clicked.
Plunker Link
http://plnkr.co/edit/RVOnf9wBF3TzXauzvMfF
HTML:
<table id="sicGroupTable" class="RadGrid_Metro">
<thead>
<tr>
<td>Sic Code Group</td>
</tr>
</thead>
<tbody ng-repeat="group in sicCodeGroup">
<tr class="rgRow">
<td class="rgExpandCol"><img class="rgExpand" ng-click="expandRow(group.GroupId)" ng-model="hideTwoDigitSub" /></td>
<td><input type="checkbox" ng-model="SelectGroup" /></td>
<td>{{group.GroupName}}</td>
</tr>
<tr ng-hide="hideTwoDigitSub">
<td></td>
<td>
<table id="sic2DigitTable" class="RadGrid_Metro">
<thead>
<tr>
<th>2 digit sic Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="twoDigitSic in twoDigitSicCodes" class="rgRow">
<td class="rgExpandCol"><img class="rgExpand" ng-click="expandRow(twoDigitSic.SicCode)" /></td>
<td><input type="checkbox" ng-model="Select2DigitSicCode" /></td>
<td>{{twoDigitSic.SICCode2}} - {{twoDigitSic.Title}}</td>
</tr>
<tr>
<td></td>
<td>
<table id="sic4DigitTable" class="RadGrid_Metro">
<thead>
<tr>
<th>4 digit sic code</th>
</tr>
</thead>
<tbody>
<tr class="rgRow">
<td class="rgExpandCol"><img class="rgExpand" ng-click="expandRow(sicCode.SicCode)" /></td>
<td><input type="checkbox" ng-model="Select2DigitSicCode" /></td>
<td>{{sicCode.SicCode}} - {{sicCode.Title}}</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JavaScript:
var app = angular.module("apptSetting", ['ngResource'])
app.factory('dataFactory',
function ($resource) {
return {
getSicGroups: $resource('../Packages/GetJsonSicCodeGroups'),
expandRow: $resource('../Packages/GetExpandedRowData')
}
});
app.controller('aPackageController', ['$scope', 'dataFactory', function ($scope, dataFactory) {
function init() {
$scope.hideTwoDigitSub = true;
$scope.hideFourdigitsub = true;
}
$scope.sicCodeGroup = dataFactory.getSicGroups.query({}, isArray = true);
$scope.twoDigitSicCodes = null;
$scope.expandRow = function (groupId, sicCode) {
if (groupId != undefined)
{
$scope.twoDigitSicCodes = dataFactory.expandRow.query({ GroupId: groupId }, isArray = true);
$scope.hideTwoDigitSub = false;
if (sicCode != null && sicCode != undefined && sicCode != "") {
if (sicCode.length == 2) {
$scope.hideTwoDigitSub = false;
$scope.twoDigitSicCodes = dataFactory.Get2DigitSicCodes.query({ GroupId: groupId }, isArray = true);
}
}
}
}
init();
}])
The issue is that you're using a single boolean hideTwoDigitSub to control all the trs created by your ngRepeat:
<tr ng-hide="hideTwoDigitSub">
So when you set $scope.hideTwoDigitSub = false; every ngHide within your ngRepeat gets that false and thus all the tr elements are shown.
Radio Button Fix
Instead of using a boolean I'd set hideTwoDigitSub to the groupId for the row you want to show (and maybe rename hideTwoDigitSub to showTwoDigitSub since the variable now indicates which row to show).
So inside your expandRow() function I'd set which row to show by changing:
$scope.hideTwoDigitSub = false;
to
$scope.hideTwoDigitSub = groupId;
And change the above tr to:
<tr ng-hide="hideTwoDigitSub != group.GroupId">
So the row will be hidden unless your control variable hideTwoDigitSub is not equal to the current groups GroupId.
Or it might be clearer to use ngShow (note I changed the hideTwoDigitSub to showTwoDigitSub in this example since it's clearer):
<tr ng-show="showTwoDigitSub == group.GroupId">
radio button plunker
Checkbox solution
This approach is easiest done switching hideTwoDigitSub to showTwoDigitSub- so everything below assumes that.
For this approach, inside init() I'd set your control variable to be an array:
$scope.showTwoDigitSub=[];
And then toggle the appropriate control inside expand:
$scope.showTwoDigitSub[groupId] = !$scope.showTwoDigitSub[groupId];
And use the array inside your html:
<tr ng-show="showTwoDigitSub[group.GroupId]">
checkbox plunker