how to add multiple div within one div using angular.js - javascript

I am new to Anjular.js. I just started to learn today so I hope all you can help me.
I have html file like this:
<div ng-conrtoller="add">
<div >
<div>{{ username }}</div>
<div>
<input type="text" ng-model="name">
<button ng-click="addname">save</button>
</div>
In controller.js file :
app.controller("add",function($scope)
{
$scope.addname=function()
{
$scope.username=$scope.name;
}
});
When I click on save button after I enter text into text filed, the entered text will be displayed within one div. If I again do the same, the name will be replaced but I want to display previously entered text as well as any text entered in the future.
Thanks.

i want to display previously entered text as well as in future enter text
You can use array to store multiple items, push items to array and use ngRepeat
HTML
<div>
<div ng-repeat="username in usernames">{{ username }}</div>
<div>
<input type="text" ng-model="name">
<button ng-click="addname()">save</button>
JS
$scope.usernames = [] ;
$scope.addname=function() {
$scope.usernames.push($scope.name);
$scope.name = "";
}
Working Demo
Currently use only unique items for testing

Related

How to create a button that works as an output display for input values AS WELL AS copy button for the displayed output?

I am studying a vanilla JS and I would like to create a form wherein the values in the input elements will be displayed inside a button. I am planning to create a form where the user will fill the questions out with their details then those answers will be displayed on the same HTML page formatted in a certain template. Currently, I can display the output however there's no line break per value. Also, since the display is a button element, the user should be able to click it to copy the formatted answers that they can paste on notepad or MS word. Is this even possible in vanilla JS or do I have to learn JS frameworks? Can you share your thoughts?
Example display on a button that can be clicked to copy the below information:
Name: John Smith (line 1)
Age: 99 (line 2)
This is the current output:
This is my current scripts:
<form name="myForm">
Name: <input type="text" id="myName" name="myName">
Age: <input type="number" name="myAge" id="myAge">
<button type="submit" name="createBtn" id="createBtn" onclick="create(); return
false">CREATE</button>
</form>
<div>
<button type="submit" id="copyBtn" onClick="copy(); return false">
<span id="userName"></span>
<span id="userAge"></span>
</button>
</div>
<script>
function create() {
document.getElementById('userName').innerHTML = document.myForm.myName.value;
document.getElementById('userAge').innerHTML = document.myForm.myAge.value;
}
function copy() {
// insert the needed function here
}
</script>

How to submit data from input fields generated using ng-repeat and get the value of all the input fields?

I am new to Angular js and I need to create a form where the input fields will be dynamically generated based on a loop and I need to send all the field's data to an API.
This is the string that I get from the backend
"Earth:planet,life,solar,global$##data_col.signal:gateway ox,gw ox,gateway all ox,all sig,,gw signal gain,gateway"
This is my part of the html below where I process the string
<div class="container-fluid synBox">
<span><b>Enter synonyms:</b></span>
<form enctype='application/json'>
<div class="form-group" name="syn" ng-repeat="n in message.expert_advice.split('$##')">
<span class="fonts" style="color:#487baa;"><b>{{n.split(":")[0]}}</b></span>
<input class="form-control" id="expert_advice_input" type="text" ng-model={{n.split(":")[1]}} placeholder="" name={{n.split(":")[0]}} value={{n.split(":")[1]}}>
</div>
<button type="submit" class="btn btn-primary center-block" ng-click="submit_synonyms()">Submit</button>
</form>
</div>
Here is my js for the function in onclick submit_synonyms()
$scope.submit_synonyms = function() {
var variable = document.getElementById('expert_advice_input').value;
console.log(variable)
}
Here is what it looks like in the UI
I was hoping that I would get the value for all input fields but when I click the button I only get the value of the first input field (as seen in the console).
planet,life,solar,global
I also followed other similar questions in stackoverflow like Ng-repeat submit form with generated fields but couldn't figure out how to apply it in my situtation. What am I doing wrong?
Do note that the number of input fields can be dynamic based on the string supplied to me.
ADDITIONAL INFO
Just for the sake of clarity, the reason I am doing the splits on the string is to get the heading and the remaining comma separated strings in the input fields to which a user can add more string and hit the submit button.
write the following in your controller
const param = <input> //"Earth:planet,life,solar,global$##data_col.signal:gateway ox,gw ox,gateway all ox,all sig,,gw signal gain,gateway";
$scope.param = param.split('$##').reduce((acc,val)=> {
const spl = val.split(':');
acc[spl[0]] = spl[1];
return acc;
},{});
and following in your template or html
<ul >
<li data-ng-repeat="(key,value) in param"><label for={{key}}>{{key}}</label><input type='text' value='{{value}}'</li>
</ul>
add styles and optimize code style.

How to add HTML templates in a page?

I made an template of a price box, and I want that every time that I click a button a new price box shows up in the page.
Just a simple example for my template:
<div>
<h1> Product: {productName} </h1>
</div>
And everytime that I click a button, I pass the name and this template will show in the page.
I was looking and I saw the template tag with javascript and another solutions like Mustache. Which approach would be better and more readable?
Not exactly sure what your asking but this would be very simple using pure javascript. Please see the following code snippet:
function addProduct() {
const productName = document.querySelector('#productName').value;
productName ? document.querySelector('#products').innerHTML += `
<div><h1>Product: ${productName}</h1></div>
` : alert('Enter Product Name');
}
document.querySelector('#add').addEventListener('click', () => addProduct());
<input type="text" id="productName">
<button id="add">Add Product</button>
<div id="products"></div>

How to get a particular text from the text box

I have a scenario, where I need to get a certain text from the text box. I understand that the following code will return the entire text in the text box. Is there a way to get a particular line of text from the text box, and not the entire text? Thanks!
WebElement config = driver.findElement(By.id("adFragment"));
//Assertion
verifyDisplay(config.getAttribute("value"), By.id("adFragment"));
The HTML:
<section style="display: block;">
<div>
<h2 class="no-margin">tag source</h2>
<div>
<textarea placeholder="Your HTML fragment here" rows="30" id="adFragment" name="adFragment" style="height:400px; width:800px;"></textarea><br>
</div>
</div>
</section>
Please try the following, I have not tried it. But I assume it would help you
String eleValue = config.getAttribute("value");
if(eleValue.contains("YourRequiredText")){
//Either you can put the required text in variable by splitting the string or mark it as pass
Assert.assertTrue(true);
}
Let me know if this helped you.

How to select form input based on label inner HTML?

I have multiple forms that are dynamically created with different input names and id's. The only thing unique they will have is the inner HTML of the label. Is it possible to select the input via the label inner HTML with jQuery? Here is an example of one of my patient date of birth blocks, there are many and all unique except for innerHTML.
<div class="iphorm-element-spacer iphorm-element-spacer-text iphorm_1_8-element-spacer">
<label for="iphorm_081a9e2e6b9c83d70496906bb4671904150cf4b43c0cb1_8">events=Object { mouseover=[1], mouseout=[1]}handle=function()data=Object { InFieldLabels={...}}
Patient DOB
<span class="iphorm-required">*</span>
</label>
<div class="iphorm-input-wrap iphorm-input-wrap-text iphorm_1_8-input-wrap">
<input id="iphorm_081a9e2e6b9c83d70496906bb4671904150cf4b43c0cb1_8" class="iphorm-element-text iphorm_1_8" type="text" value="" name="iphorm_1_8">events=Object { focus=[1], blur=[1], keydown=[1], more...}handle=function()
</div>
<div class="iphorm-errors-wrap iphorm-hidden"> </div>
This is in a Wordpress Plugin and because we are building to allow employees to edit their sites (this is actually a Wordpress Network), we do not want to alter the plugin if possible.
Note that the label "for" and the input "id" share the same dynamic key, so this might be a way to maybe get the id, but wanted to see if there is a shorter way of doing this.
Here I cleaned up what is likely not used...
<div>
<label for="iphorm_081a9e2e6b9c83d70496906bb4671904150cf4b43c0cb1_8">
Patient DOB
<span class="iphorm-required">*</span>
</label>
<div>
<input id="iphorm_081a9e2e6b9c83d70496906bb4671904150cf4b43c0cb1_8">
</div>
You can use the contains selector to select the Patient DOB labels, then find the related input.
$('label:contains("Patient DOB")').parent('div').find('input');
This assumes that the label and input are wrapped in the same div and may not work if more than one pair is in the same div. At least the first part will get you the labels that contain Patient DOB, then you can adjust the later parts to find the correct input element.
For more help on jquery selectors, see the API.
Here is a fiddle demonstrating this.
var getForm = function(labelInnerHtml) {
var $labels = jQuery('label');
$labels.each(function() {
if (jQuery(this).html() == labelInnerHtml) {
var for_id = jQuery(this).attr('for');
return jQuery('#'+for_id);
}
});
return [];
};​​
The class iphorm_1_8 on the input is unique for each form element. So it's simple.
$('.iphorm_1_8');

Categories

Resources