Develop Reference

insert attributes dynamically in html elements in angular

I have to insert a set of attributes to my a component I want to re use...
now different attributes will come as string to me...
say for example I want to insert an element in my component
<input type="text" maxlength="10" placeholder="enter your name"/>
then i will get all the attributes as a single string
attr = 'type="text" maxlength="10" placeholder="enter your name"'
in the controller for my component...
and i have to insert that to my conponent in the html...
i have tried
<input {{attr}}/>
and
<input {{jQuery.parseHtml(attr)}}
etc..
but it is not working... also, could not find any solutions...
please share any solutions or some links/references helpful for me...

You can use #Input properties to pass data to a nested reusable component. However, AFAIK there isn't an easy way to pass a string of html attributes and apply them automatically. You'd either need to pass them on individual input properties or write code to process the string yourself and map them into attributes for binding.

Use binding for each attribute you want to change dynamically
Component:
typeTxt: string = "text";
maxLengthNum: number = 10;
placeholderString: string ="enter your name";
Html:
<input [type]="typeTxt" [maxlength]="maxLengthNum" [placeholder]="placeholderString"/>
See the documentation to better understand data binding and deal with the different attribute types (Properties, events, two-way, etc.)
Use the parent tag to dynamically change your template
Component:
htmlString: string = '<input type="text" maxlength="10" placeholder="enter your name"/>';
Html:
<div [innerHTML]="htmlString"></div>
Result:
<div>
<input type="text" maxlength="10" placeholder="enter your name"/>
</div>

Unable to display variable content inside a input box

I'm using jquery, JS and html with a parse.com backend.I cannot find an exact solution on SO or google to this issue.
I've saved a string variable from a db using
document.getElementById("div_name").innerHTML = name;
I'm able to display it on the html page using
<div id= "div_name"></div>
Now I want to add it to an input box and have the string display as the default value in the box. I thought I could do this using
<input type="text" id="div_name"/>
But this only displays a blank box, no data. What have I missed in my approach please?

As Tilwin Joy pointed out, with pieces from original post, e.g.,
<div id= "div_name"></div>
<input type="text" id="div_name"/>
there may be 2 elements with same id ?
try
html
<div id= "div_name"></div>
<input type="text" class="div_name" value="" />
js (utilizing jquery library)
$(".div_name")
.val($("#div_name").text())
jsfiddle http://jsfiddle.net/guest271314/6L7jK/

If you are using <input>, should be
document.getElementById("div_name").value = name;

GetElementsByName with array like name

i often use this notation when i name my controls in order to get an array in POST or GET.
<input name="color[1]" type="text" />
<input name="color[2]" type="text" />
<input name="color[3]" type="text" />
so in my scripts i can do
<?php $data=$_GET["color"];
for each ($color as $key=>$value) {
doSomething();
} ?>
Often happens that i need to get those id back in javascript , but i cannot get them , so i often add an ID to each element in html like that
<input name="color[3]" id="color_3" type="text" />
so that i can use document.getElementsById('color_3')
Instead i would like to find way to use document.getElementsByName(color[3])...
but i cannot really get it to work.
Any help?

If you want all of the color inputs, you can use querySelectorAll instead to query for the name attribute:
document.querySelectorAll("input[name^='color[']")
This looks through the document for all input tags whose name attribute starts with color[. Here is a fiddle for this.
If you only want color[3], you can use:
var color3 = document.getElementsByName("color[3]");
console.log(color3[0]);

<input name="color[3]" id="color_3" type="text" />
var element = document.getElementsByName("color[3]");
alert(element[0].id);
It works fine .. The thing you should have in your mind is Return type is an array of elements not a single element

Input from user without the <input> tag

i need to get an input from user, for instance his name, but the user won't be able to edit his name, like in a text box. This is what i'm using right now:
<input id="number_input" type="text" size="12" maxlength="19" />
In order to write or edit his name the user will use already existing buttons. Just like in a calculator. How can i achieve this in html??
Thanks.

I would probably consider using this: http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/
DEMO HERE

Obtain the label name using javascript

I want to know whether it is possible to obtain the label name along the text box.
For example, the following code asks the user for their name and "Your name" is the label.
<label>Your name:</label> <input type="text" size="15" name="name" />
I want to know if I can obtain the label name "Your Name" using javascript.

The answer on the first approach is clever:
Find html label associated with a given input
Otherwise use a toolkit and lots of clumsy DOM traversal.

Javascript Method
document.getElementById('<%=Label.ClientID%>').value
JQuery Method
$('#<%= Label.ClientID %>').val()