I have an input text with a table in which I filter some values from a JSON with an ng-repeat in meanwhile I'm typing.
<input type="text" placeholder="Choose" ng-model="item.sTxt"/>
<table>
<thead>
<tr>
<th>First Value</th>
<th>Second Value</th>
</tr>
</thead>
<tbody>
<tr
data-ng-repeat="item in numberList.getList | filter:searchText"
ng-click="setSelected(item.last)">
<td>{{item.first}}</td>
<td>{{item.last}}</td>
</tr>
</tbody>
</table>
I can show an alert when I click a row in the table in this way:
$scope.idSelectedVote = null;
$scope.setSelected = function (idSelectedVote) {
$scope.idSelectedVote = idSelectedVote;
alert(idSelectedVote);
};
but i would take that value and pass it in my input text. How could i do it in angularjs?
you can use ng-model to create a model on text input, then just pass the value of clicked table row to that model, like this
<input ng-model='input' type="text" placeholder="Choose"/>
$scope.setSelected = function (idSelectedVote) {
$scope.idSelectedVote = idSelectedVote;
$scope.input=idSelectedVote;
//alert(idSelectedVote);
};
Also if you want to filter out the repeated list, you can use the same model, in the filter.
you can see this Fiddle, it does both filter on input and place text in input on click of tr
Related
Need help with populating a text area based on html table row selection.
In the table below, I want to extract the content of the column 'Comments' for the selected row and write into the text area 'Comment' on the same page. I have only managed to create the table but nothing else.
Below is the code I have now created from this link. What is happening now is that only the currently selected cell gets put in the text box instead of just the 'Comment' column. I want to input only in the 'Comment' column into the box regardless of the cell clicked upon in the row.
<table id="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Comments</th>
</tr>
<tbody>
<tr>
<td>John</td>
<td>42</td>
<td>avery long comment</td>
</tr>
<tr>
<td>Peter</td>
<td>35</td>
<td>another very long comment</td>
</tr>
<tr>
<td>Mary</td>
<td>54</td>
<td>some comment</td>
</tr>
</tbody>
</table>
<script>
var table = document.getElementById('table');
var selected = table.getElementsByClassName('selected');
table.onclick = highlight;
function highlight(e) {
if (selected[0]) selected[0].className = '';
e.target.parentNode.className = 'selected';
var element = document.querySelectorAll('.selected');
if (element[0] !== undefined) { //it must be selected
document.getElementById("myTextbox").value = element[0].children[0].firstChild.data
}
}
</script>
<div >
<textarea class="form-control" id="myTextbox"></textarea>
</div>
Thanks for your help.
You're getting the first column but you can get the third column with the comment by changing the index of the child to 2 instead of 0.
document.getElementById("myTextbox").value = element[0].children[2].firstChild.data
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.
Below is my plunker in which I'm tring to display the output types based on different months.I want to save the maximum capacity for each month on click of save button by getting all the values in an array.But when I type in a text box the value gets repeated as the index is repeated column wise.
ng-repeat in table
Below is the code:
JavaScript:
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.outputType=["Coal","ROM","WASTE"];
$scope.months=["JAN","FEB","MARCH","APRIL"];
$scope.values = [];
$scope.save=function(){
alert($scope.values)
}
});
HTML:
<table style="border:1px solid red;">
<thead>
<tr>
<th> </th>
<th ng-repeat="i in months"><b>{{i}}</b></th>
</tr>
</thead>
<tbody ng-repeat="item in outputType">
<tr>
<td>{{item}} </td>
<td ng-repeat="i in months">
<input type="text" ng-model="values[$index]"
placeholder="Max.Capacity">
</td>
</tr>
</tbody>
</table>
Check that http://plnkr.co/edit/4DUDIBoTOCI4J89FiQeM?p=preview
JS
$scope.values = {};
HTML
<input type="text" ng-model="values[item][i]" placeholder="Max.Capacity">
or
<input type="text" ng-model="values[i][item]" placeholder="Max.Capacity">
Solution if you want to leave an array.
You need to change your ngModel in input
<input type="text" ng-model="values[$index]" placeholder="Max.Capacity">
to
ng-model="values[$parent.$index][$index]".
Here is an example:
Example
Table contains 2 columns. each column have form elements like text box and dropdown box. what i want is , when i click the row i have to call javascript function. My problem is, when i enter value in textbox or select value from dropdown that time also javascript function has called. How to prevent this. i dont want to fire the javascript function when entering text box and select the value from dropdown.
jQuery("#testParam tbody tr").on("click", function(event) {
var position = paramTable.fnGetPosition(this); // getting the clicked row position
//alert(position);
createTable();
});
function createTable(){
alert("clicked");
}
<table id="testParam">
<thead>
<tr>
<th class="no-sort">
Name
</th>
<th class="no-sort">
Type
</th>
</tr>
</thead>
<tbody>
<tr id="paramRow1">
<td><g:textField name="name1" id="name1" required="" value="${testName}" /></td>
<td><g:select name="type1" noSelection="['':'-Select-']"
id="type1"
from="${testParameterInstance?.constraints?.type?.inList}"
required="" value="${testParameterInstance?.type}"
valueMessagePrefix="testParameter.type" /></td>
</tr>
</tbody>
</table>
try this way
$('#name1,#type1').on('click',function(event){
event.stopPropagation();
});
Happy Coding :)
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