Add button to header of table in angularjs - html

How do I add a button to the header of the table. I'm using ng-table-dynamic and I have no idea.
I tried to use headerTemplateURL attribute but it doesn't work.
I don't want to use position to do the trick.
p/s: https://codepen. io/trungducng/pen/RwbqJpb

Just use headerTemplateURL and insert url of the component to it:
"headerTemplateURL": "button.html"

Related

how to create a dropdown passengers count form?

Can someone help me out here on how to add passengers count dropdown form like on the image below. i have been searching all over but cannot seem to find any demo or help.
thanks for your help
This is a solution using pure HTML, CSS, and jQuery. For a Bootstrap-specific answer, How use input field as toggle for bootstrap 4 dropdown may help.
Moving on.
You should create a normal number type form and add a disabled attribute in the input tag so that no cursor appears when you click the form (<input type="number" disabled>). Then, just create a dropdown menu (probably a <div> with an absolute position right under the input) with a classname of your choice (assuming in this answer that you choose .passengerInput as the classname).
You can hide the dropdown by default using the $(".passengerInputDropdown").hide() method in the body of your JS.
Then, when you click the form, using the $(".passengerInput").toggle() method, do something to the effect of:
$(".passengerInput").on("click", () => {
$(".passengerInputDropdown").toggle();
})
Let me know if this helps!

How to label in html NOT with id?

I am working on a React App in which it requires working with tables and adding rows dynamically. I used this answer to achieve that: https://stackoverflow.com/a/54455262/13037132. I am trying to label an <input type="file" id={id} /> for styling the whole
in every cell of the table. The id={id} attribute in the input element is for dynamically adding a row when an Add Row button is clicked.
I found some solution for styling this input, but it requires labelling it, needs an id attribute to link to. How can I do that, since the id is already occupied? Is there a way to link this input to a label without using the id but something else? If you want any additional data on this, please let me know.
And I am also looking for a way to add columns too just like I am adding rows using the above-stated answer. Can anyone help?
Use a class instead of id, since multiple id with same value does not help, use a class and access that input by $(this):
$('.class_name').click(function(){
$(this) // this will acquire the clicked/target input
})

using href or routerlink with #

I'm fairly new to changing paths / position of page so I would like a little help on this.
Say, when a button is clicked, I want to scroll down to another portion of the page. (where id of that section is 'xyz') however, I'm using an entirely different component to access that section.
If I were to use href, I can easily do : href="/app/appid#xyz"
however, if appid is a variable retrieved from the ts file, how can I insert it into my href?
It's easier to to use [routerlink]="['app', appid]" but how can I insert the "#xyz" into my string?
Or is there a completely separate and easier functionality I can use?
Thank you
Add the frament attribute:
<a [routerLink]="['app', appid] fragment="xyz">Link</a>
https://angular.io/api/router/RouterLink

Dynamically add textbox in HTML Page through Angular JS

I want dynamically add text-box in html page when user is press a button. and after that i want to get the respective field value or all field value.
I tried doing ng-repeat but it will not work. can anyone tell me how i will achieve this.
I would indeed use ng-repeat, and just push a new object onto the array. Maybe something like this?
<button ng-click="textFields.push("")">Add</button>
<textarea ng-repeat="val in textFields" ng-model="val"></textarea>
Well there are a few things you could try. One of them is loading a hidden div when clicked on the button. The hidden div contains the text box.
Like this :
$(document).ready(function(){
$("#hiddendiv").hide();
$("#button").click(function(){
$("#zmedia").show();
}};
And in your html form you just add a div that contains a textbox and the id of the dive should be "hiddendiv". The downside is that once the hidden div is loaded, it cant be removed. There are other scripts that are a lot more sophisticated, check these links out:
https://github.com/wam/jquery-addable
http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/

JTabbedPane tab-alignment

I can't seem to find this.
What method (and constant) do I use to align the tabs in a JTabbedPane.
I Found how to switch between Top and Bottom. But I'm trying to put them in the center at the bottom.
So that it looks like this
ooooooooooooooooooo
o..................................o
o..................................o
o..................................o
o..................................o
ooooooooooooooooooo
...... |Tab1||Tab2|
Thanks
You can't. This layout rule is enforced by the selected look and feel.
You can write your own UI-Delegate for JTabbedPane component that extends BasicTabbedPane class and overwrite the
method 'getTabInsets(int, int)'. Change value of 'tabInsets' atribute ( default value is: new Insets(0,4,1,4), centered).