I have a JSON like this
{textTemplate:"Name：{0}，Phone：{1}",controls:[{id:1,Name:"Name",type:"text"},{id:2,Name:"Phone",type:"text"}]}
I have no idea how to use the directive to replace string to html control
My Expect :
Name : <input type='text' name='Name' /> Phone : <input type='text' Name='Phone' />
You need to create a directive who wraps an input something like:
<div my-directive-input name="model.Name" phone="model.Phone"></div>
The template should be the one you presented here.
The directive should replace the div with the new template.
You should download the data from your server and bind it to your model(in this example it's straight on your model - but this can change due to your demands.
Related
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>
I have the following code:
{{data.title}}
How can I get handlebars to render the information in the input field onto my html form?
<input class='add-title' name="title" type="text" placeholder="Title" >
You need to add a
value={{data.title}}
tag in the field and stringify it so it looks like this:
"{{data.title}}"
I'me new to Angular JS. I wanted to know how to display the tags(or directive, expression etc.) written in my htm as such (present inside the ng-app).
e.g
<div ng-app="myExampleApp">
<input type="text" ng-model="firstname"/>
{{firstname}}
</div>
Now the textbox htm should be shown as such. (instead of a text box getting rendered). Please let me know how to escape them
One way is to use < and > and so on. But what about ng-model and how to prevent the expression from getting evaluated.
ng-non-bindable directive will do this!. :)
e.g.
<div ng-app="myExampleApp">
<input type="text" ng-model="firstname"/>
<label ng-non-bindable="">{{firstname}}</label>
</div>
I'm using angular to post to a webform. Using ng-model I need to build an array with values that have dots in them.
I would like something like
<input type="text" ng-model="quiz.entry.958924423" name="entry.958924423" required />
would correspond to an object like this:
$scope.quiz= {'entry.958924423': '1F9trPeu9DA4W0CjADN4a1fl3Jh682ZPF8remWB21RhI'};
now it makes
$scope.quiz.entry = 1F9trPeu9DA4W0CjADN4a1fl3Jh682ZPF8remWB21RhI
Try this method, if I understand you correctly:
<input type="text" ng-model="quiz['entry.958924423']" required />
I'm new to EmberJS and hate writing Views in the following manner:
{{view Ember.TextField placeholder="placeholder text" valueBinding="title" }}
Instead I would like to write something like :
<input type="text" ng-model="title" />
The second one above is from AngularJS
I've seen this:
<input type="text" {{bindAttr value="title"}}></input>
But when I change the text value, it does not update the model value (or bound value for other elements)
Is there a way in EmberJS to simply specify a model in a text field - like ng-model="..." ?