The content of the ng-if still shows if I click the button. But I want it only to show in a specific situation. In another situation the button should unhide a different <div>
I thought the part after ng-if gets removed in the DOM, so I am wondering why it is even able to show up.
<tr>
<td>{{approval_item.requested_for}}</td>
<td><a data-toggle="collapse" data-target=".{{approval_item.document_id_number}}"><i class="fa fa-trash"></i></a></td>
</tr>
<div ng-if="0">
<tr class="hide-table-padding collapse {{approval_item.document_id_number}}">
<td colspan="5">
<tr class="collapse {{approval_item.document_id_number}}">
<td><b>Item / Service</b></td>
<td><b>Quantity</b></td>
<td><b>One-time Price</b></td>
<td><b>Monthly</b></td>
<td><b>Yearly</b></td>
</tr>
<tr class="collapse {{approval_item.document_id_number}}" ng-repeat="requested_item in approval_item.request_ritms">
<td>{{requested_item.name}}</td>
<td>{{requested_item.quantity}}</td>
<td>{{requested_item.price_string}}</td>
<td>{{requested_item.price_monthly_string}}</td>
<td>{{requested_item.price_yearly_string}}</td>
</tr>
<tr class="collapse {{approval_item.document_id_number}}">
<td></td>
<td></td>
<td><b>One-time Total</b></td>
<td><b>Monthly Total</b></td>
<td><b>Annually Total</b></td>
</tr>
<tr class="collapse {{approval_item.document_id_number}}">
<td></td>
<td></td>
<td>{{approval_item.price_string}}</td>
<td>{{approval_item.price_monthly_string}}</td>
<td>{{approval_item.price_yearly_string}}</td>
</tr>
</td>
</tr>
</div>
The problem is that div can't be a child of table.
If you want to hide the row, you should remove the div and move the ng-if into the tr itself.
Do
angular.module('myApp', [])
.controller("Ctrl_List", ["$scope", function(s) {}])
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<div class="container" ng-controller="Ctrl_List">
<table>
<tr>
<td>
row 1
</td>
</tr>
<tr ng-if="0">
<td>
row 2
</td>
</tr>
</table>
</div>
</div>
Don't
angular.module('myApp', [])
.controller("Ctrl_List", ["$scope", function(s) {}])
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
<div class="container" ng-controller="Ctrl_List">
<table>
<tr>
<td>
row 1
</td>
</tr>
<div ng-if="0">
<tr>
<td>
row 2
</td>
</tr>
</div>
</table>
</div>
</div>
Related
There is a table which is populated by ng_repeat, I am going to show a loading/progress/spinner on it while data is loading
<div class="panel-body panel-success">
<div class="col-lg-12">
<table class="table table-bordered" >
<tr>
<th>Name</th>
<th>Family</th>
<th>Age</th>
</tr>
<tr ng-repeat="r in results track by r.ID">
<td>
{{r.Name}}
</td>
<td>
{{r.Family}}
</td>
<td>
{{r.Gender}}
</td>
</tr>
<tfoot>
<tr>
<td align="center" colspan="8">
<div class="pull-center">
<ul uib-pagination total-items="totalCount" ng-change="pageChanged()"
items-per-page="pageSizeSelected"
direction-links="true" ng-model="pageIndex"
max-size="maxSize"
class="pagination"
boundary-links="true"
rotate="false" num-pages="numPages"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
How can show loading/progress/spinner inside table dusring loading data? I want to show spinner inside table (Instead of rows, I mean keep table column name)
Show spinner while data is not loaded... once loaded, hide it !!
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="soQuestion">
<div class="panel-body panel-success" ng-controller="soController">
{{results.length}}
<div class="col-lg-12">
<table class="table table-bordered">
<tr>
<th>Name</th>
<th>Family</th>
<th>Age</th>
</tr>
<tr ng-if="results.length<1">
<td>
//insert the spinner image here
</td>
<td>
//insert the spinner image here
</td>
<td>
//insert the spinner image here
</td>
</tr>
<ng-container ng-if="results.length>0">
<tr ng-repeat="r in results track by r.ID">
<td>
{{r.Name}}
</td>
<td>
{{r.Family}}
</td>
<td>
{{r.Gender}}
</td>
</tr>
</ng-container>
<tfoot>
<tr>
<td align="center" colspan="8">
<div class="pull-center">
<ul uib-pagination total-items="totalCount" ng-change="pageChanged()" items-per-page="pageSizeSelected" direction-links="true" ng-model="pageIndex" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
Im using datatables responsive/select right now to display some data. How would I go about making it so when I click on any of these rows in the table, it opens up the "col-md-6" panel? So hidden when no rows are selected, then shown when a row is selected.
<!-- begin row -->
<div class="row">
<!-- begin col-2 -->
<div class="col-md-2">
<div id="menu-panel"></div>
<!-- begin panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">Digital Inputs</h4>
</div>
<div class="alert alert-info fade in">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
Click on a Digital Input to edit its properties.
</div>
<div class="panel-body">
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Input</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td>1</td>
<td>Digital Input 1</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>Digital Input 2</td>
</tr>
<tr class="gradeA">
<td>3</td>
<td>Digital Input 3</td>
</tr>
<tr class="gradeA">
<td>4</td>
<td>Digital Input 4</td>
</tr>
<tr class="gradeA">
<td>5</td>
<td>Digital Input 5</td>
</tr>
<tr class="gradeA">
<td>6</td>
<td>Digital Input 6</td>
</tr>
<tr class="gradeA">
<td>7</td>
<td>Digital Input 7</td>
</tr>
<tr class="gradeA">
<td>8</td>
<td>Digital Input 8</td>
</tr>
<tr class="gradeA">
<td>9</td>
<td>Digital Input 9</td>
</tr>
<tr class="gradeA">
<td>10</td>
<td>Digital Input 10</td>
</tr>
<tr class="gradeA">
<td>11</td>
<td>Digital Input 11</td>
</tr>
<tr class="gradeA">
<td>12</td>
<td>Digital Input 12</td>
</tr>
<tr class="gradeA">
<td>13</td>
<td>Digital Input 13</td>
</tr>
<tr class="gradeA">
<td>14</td>
<td>Digital Input 14</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end panel -->
</div>
<!-- begin col-2 -->
<div class="col-md-6">
<!-- begin panel -->
<div class="panel panel-inverse" data-sortable-id="form-stuff-2">
<div class="panel-heading">
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
</div>
<h4 class="panel-title">New RTU FZB-1000 - FZB-1000</h4>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Digital Input Basic Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Digital Input:</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="1" disabled />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Display Input:</label>
<div class="col-md-2">
<input type="checkbox" name="" value="" checked><br>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Signal Name:</label>
<div class="col-md-8">
<input type="device" class="form-control" value="Digital Input 1" />
</div>
</div>
</div>
</div>
<!-- end panel -->
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-sm btn-primary m-r-5">Save</button>
<button type="submit" class="btn btn-sm btn-default">Cancel</button>
</div>
</div>
<!-- end col-10 -->
</div>
<!-- end row -->
App.restartGlobalFunction();
App.setPageTitle('Color Admin | Managed Tables - Select');
$.getScript('assets/plugins/DataTables/media/js/jquery.dataTables.js').done(function() {
$.getScript('assets/plugins/DataTables/media/js/dataTables.bootstrap.min.js').done(function() {
$.getScript('assets/plugins/DataTables/extensions/Select/js/dataTables.select.min.js').done(function() {
$.getScript('assets/plugins/DataTables/extensions/Responsive/js/dataTables.responsive.min.js').done(function() {
$.getScript('assets/js/table-manage-select.demo.min.js').done(function() {
TableManageTableSelect.init();
});
});
});
});
});
You can do something like this.. give your input field id for example
digital input: id="digital-input-number" and for digital signal id="digital-input-name" and here goes the code...
$('.gradeA td').on('click',function(){
var text=[];
text = $(this).parent().find('td');
//console.log(text[0].innerText);
// console.log(text[1].innerText);
$("#digital-input-number").val(text[0].innerText);
$("#digital-input-name").val(text[1].innerText);
});
this code will put the value of your table to form dynamically i.e you click on one row data of that row goes to the form which i suppose you want to see.
I don't see any JS, you should attempt this yourself. What I can say is that in order to get what you need, you will have to call the inputs and according to which column is selected on the table, place those values equal to what is selected.
So, if you click on Digital Input 1, set the value for Digital Input to the row selected but the first column. It will display the value of 1.
Then you just need to call the value of the selected column to the signal name and it will display Digital Input 1.
None of your elements have id tags.
In order to do this, your rows and columns will need to have id tags. Then you can easily grab the innerHTML of the id using JS.
I hope this helps.
I'd like some help please.
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
When the page loads for the first time I want the table to be collapsed. When I click the Toggle button I want to change the table status, so basically to expand it and collapse it again if the button is clicked again.
This is my script
<script>
$(document).ready(function() {
$('.toggle-btn').closest('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).closest('table').toggle();
});
});
</script>
How can I make this work correct ?
why not just use toggle function directly?
$(document).ready(function() {
$('table').hide();
$('.toggle-btn').on('click', function() {
$('table').toggle();
});
});
if you have only one table then only do
$(document).ready(function() {
$('tbody').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$('tbody').toggle();
});
});
For more then one sibling tables
You can find closest h2 and next() gives you table
$(document).ready(function() {
$('.toggle-btn').closest('h2').next().find("tbody").hide();
$('.toggle-btn').on('click', function() {
$(this).closest('h2').next().find("tbody").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Operating systems <span class="button small toggle-btn">Toggle</span></h2>
<table class="data" cellpadding="8" border="1">
<thead>
<tr>
<th class="first" style="width:120px">
Operating System </th>
<th class="">
Percentage </th>
</tr>
</thead>
<tbody>
<tr>
<td class="">iOS 8.4</td>
<td class="">
<div class="ui-percentage" style="width:17%">17 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.3</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.2</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr class="tr even">
<td class="">iOS 8.1.3</td>
<td class="">
<div class="ui-percentage" style="width:11%">11 %</div>
</td>
</tr>
<tr>
<td class="">iOS 8.1</td>
<td class="">
<div class="ui-percentage" style="width:6%">6 %</div>
</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
$('.toggle-btn').parent().next('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().siblings('table').toggle();
});
});
Selector should be $('.toggle-btn').parent().next('table')
DEMO
the function closest() goes up the element's parents, so it will never find the table. You would have to do something like this:
$(document).ready(function() {
$('.toggle-btn').parent().parent().find('table').hide(); // I want to target the table right after the button
$('.toggle-btn').on('click', function(event) {
$(this).parent().parent().find('table').toggle();
});
});
But this would not work if there are multiple tables. Consider using an id or for the table, so that you can access it directly. Eg:
<table id="data-table-1" class="data" cellpadding="8" border="1">
That would make the javascript much simpler, ie:
$('.toggle-btn').on('click', function(event) {
$('#data-table-1').toggle();
});
Goal:
When you press a specific button for instance button id="button_a", you should retrieve the value from id="a1" and then it should display as alert message.
Problem:
When you have a table between 100 and 200 rows, you cannot hard code the specific id name in the javascript.
Question:
How should you retrieve the value of the for instance id="a1" when you have pressed the button?
I have tried and learned that you use "previousSibling" (http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_previoussibling) but it more complicated that I have expected.
<table>
<tr>
<td><div id="a1"><div id="aa1">aa1</div></div></td>
<td><div id="a2"><div id="aa2">aa2</div></div></td>
<td><button id="button_a"></button></td>
<td></td>
</tr>
<tr>
<td><div id="b1"><div id="bb1">bb1</div></div></td>
<td><div id="b2"><div id="bb2">bb2</div></div></td>
<td><button id="button_b"></button></td>
<td></td>
</tr>
<tr>
<td><div id="c1"><div id="cc1">cc1</div></div></td>
<td><div id="c2"><div id="cc2">cc2</div></div></td>
<td><button id="button_c"></button></td>
<td></td>
</tr>
<tr>
<td><div id="d1"><div id="dd1">dd1</div></div></td>
<td><div id="d2"><div id="dd2">dd2</div></div></td>
<td><button id="button_d"></button></td>
<td></td>
</tr>
</table>
If I understand right you want the value of first div inside tr on button click. You can use:
$("button").on("click", function() {
var val = $(this) //referes to the dom element, in this case the button
.parents("tr") //get ancestor tr of the clicked element(button)
.find("td:first-child > div") //find first td that has direct child div
.text(); //get the text value of the div element
$(this).after("<span>" + val + "</span>");//for test purposes
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div id="a1">
<div id="aa1">aa1</div>
</div>
</td>
<td>
<div id="a2">
<div id="aa2">aa2</div>
</div>
</td>
<td>
<button id="button_a">Click!</button>
</td>
<td></td>
</tr>
<tr>
<td>
<div id="b1">
<div id="bb1">bb1</div>
</div>
</td>
<td>
<div id="b2">
<div id="bb2">bb2</div>
</div>
</td>
<td>
<button id="button_b">Click!</button>
</td>
<td></td>
</tr>
<tr>
<td>
<div id="c1">
<div id="cc1">cc1</div>
</div>
</td>
<td>
<div id="c2">
<div id="cc2">cc2</div>
</div>
</td>
<td>
<button id="button_c">Click!</button>
</td>
<td></td>
</tr>
<tr>
<td>
<div id="d1">
<div id="dd1">dd1</div>
</div>
</td>
<td>
<div id="d2">
<div id="dd2">dd2</div>
</div>
</td>
<td>
<button id="button_d">Click!</button>
</td>
<td></td>
</tr>
</table>
References
.parents()
.find()
:first-child
With the jQuery you can navigate by tree easily. What you can do it the following:
$('#button_a').on('click', function(e) {
var div_a1 = $(this).closest('tr').find('div').first();
// and so on
}
Read more at jQuery documentation
I have a bootstrap table with expandable rows, what I want is, opening the page with an already expanded row (say first row).
Below is the table I am using.
<table class="table no-padding-table">
<thead>
<tr>
<th>Date</th>
<th>Date2</th>
<th>Date3</th>
</tr>
<tbody>
<tr data-toggle="collapse" data-target="#extend{{$index}}"
ng-repeat-start="date in dates">
<td>
<p>{{date}}</p>
</td>
<td>
<p>{{date}}</p>
</td>
<td>
<p>{{date}}</p>
</td>
</tr>
<tr ng-repeat-end="">
<td colspan="3" class="hiddenRow">
<div class="accordian-body collapse">
TEST
</div>
</td>
</tr>
</tbody>