Can I set ng-model to two values? - javascript

I have an input
<input type="text" ng-model="choice.text">
Where choice.text creates a new text property in the object choice. This allows me to send the contents of the input to different page. While this feature works, I would also like to add another feature where the content of the input is displayed and updated in real time on the page. Something to this effect.
Unfortunately, ng-model is already set to choice.text. Is there a way I can have set two values to one ng-model? It would perhaps look like this:
<input type="text" ng-model="choice.text name"></p>
<p ng-bind="name"></p>
If not, is there another way to achieve this effect?
EDIT: For those wondering, when I try <p ng-bind="choice.text"></p>it doesnt work for some reason.
EDIT 2: I simplified the code for the sake of the question. Here is the actual code for more detail:
<div class ="ask-container">
<div ng-switch="cbstate">
<div ng-switch-when="not-pressed">
<h1>Choose between... </h1> <!-- I would like to add the dynamic element here -->
</div>
<div ng-switch-when="pressed">
<h1>Hi</h1>
</div>
</div>
<form role="form" ng-submit="submitChoice()">
<div class="input" ng-repeat="choice in poll.options">
<input type="text" ng-model="choice.text" placeholder="Choice {{$index+1}}"><br>
</div>
<button class="add" type="button" ng-click="addChoice()">+</button>
<button class="create" type="submit">Create</button>
</form>
</div>
EDIT 3: Same code, but with the ng-bind:
<div class ="ask-container">
<div ng-switch="cbstate">
<div ng-switch-when="not-pressed">
<h1>Choose between... </h1>
</div>
<div ng-switch-when="pressed">
<h1>Hi</h1>
</div>
</div>
<form role="form" ng-submit="submitChoice()">
<div class="input" ng-repeat="choice in poll.options">
<input type="text" ng-model="choice.text" ng-change="temp=choice.text" placeholder="Choice {{$index+1}}"><br>
</div>
<button class="add" type="button" ng-click="addChoice()">+</button>
<button class="create" type="submit">Create</button>
</form>
<p ng-bind="temp"></p>
<p ng-bind="choice.text"></p>
</div>
Note: Somebody said that the ng-repeat may be messing with my scope. Maybe keep that in mind as you try and fix my problem.

For now, just list[0]. Eventually I will want them all to appear in a list but I can do that myself. For now I just want the first input to display in the bind.
To have the first of the list appear in the bind:
<div class="input" ng-repeat="choice in poll.options">
<input type="text" ng-model="choice.text" placeholder="Choice {{$index+1}}" />
<br>
</div>
<p ng-bind="poll.options[0].text"></p>
Each <div> in the ng-repeat has its own child scope with the choice property set to poll.options[0], poll.options[1], poll.options[2], etc. Simply use those values in the parent scope.

Is this not acceptable?
<input type="text" ng-model="choice.text"></p>
<p ng-bind="choice.text"></p>

Use ng-change to update other model
<input type="text"
ng-model="choice.text"
ng-change="temp=choice.text"/>
Now for testing, use:
<p ng-bind="temp"></p>
<p ng-bind="choice.text"></p>

Related

Choose between ids that only meet some conditions

I'm facing a problem with my project. My user can create a new div by clicking a button, but he can remove whatever div he wants, expect the first one. So if he create 2 new divs here is what the code will look like:
<div id="container1">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
<div id="container2">
<input type="text" id="title2"><br />
<input type="text" id="description2">
</div>
<div id="container3">
<input type="text" id="title3"><br />
<input type="text" id="description3">
</div>
If the user remove the second div my code will look like this.
<div id="container1">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
<div id="container3">
<input type="text" id="title3"><br />
<input type="text" id="description3">
</div>
Pretty simple. Now I want to use the information entered by the user in the text inputs, but I don't know how to select the active divs. Is there a way to select the container1 and container3 in the example above?
Keep in mind that the user can use up to 99 new div.
Your help is appreciated. Thank you,
Just apply a CSS selector:
<div id="parent">
<div id="container1">
<input type="text" id="title"><br />
<input type="text" id="description">
</div>
<div id="container3">
<input type="text" id="title1"><br />
<input type="text" id="description1">
</div>
</div>
$('#parent > div')
See here for more information: https://api.jquery.com/category/selectors/
You can add a class to each item. You would need to amend your code that is called when the button is clicked to handle this.
Let's say you gave all titles a class of "myTitle" and you gave all descriptions a class of "myDescription". Your div created would look something like this:
<div id="container1">
<input type="text" id="title" class="myTitle">
<br />
<input type="text" id="description" class="myDescription">
</div>
Now, in order to get all titles and descriptions you'd use jQuery and say:
$('.myTitle').each(function () {
console.log($(this).val());
});
$('.myDescription').each(function () {
console.log($(this).val());
});
First of all, you have multiple divs with the id "title" and "description", so change those to class. You can select the nth div with jquery: $("#container" + n)
you can select the title of the nth div: `$("#container" + n).children(".title");
you can select all of the divs by adding a class to them, such as .container

jQuery Clone and select2 events

I have created two hidden fields where I am adding array to make dropdown. select2 array are depending on the first select2. So when I select in first select2 I will call select2 event to filter another select2.
All this is working correct. But I am cloning also same. But I don't know how to clone event of select2. I could not filter also. Somebody can help
My Sample code
My jsbin https://jsbin.com/monusupuni/edit?html,js,output
<div class="midcontainer pad20">
<div class="content-area fullWidth whiteBg">
<div class="pad15">
<div class="flightRows">
<div class="row flightRow">
<p><strong><span id="lbFlight">Flight 1</span></strong></p>
<div class="depCol1">
<label for="seldcity1" id="lbDeptCity"></label><br>
<input type="hidden" id="seldcity1" name="seldcity1" class="styled wth190 seldcity" />
</div>
<div class="depCol2">
<label for="selacity1" id="lbArrivalCity"></label><br>
<input type="hidden" id="selacity1" name="selacity1" style="width: 210px;" class="styled wth190 selacity" />
</div>
<div class="depCol1">
<label for="selddate1" id="lbDeptDate"></label><br />
<input name="selddate1" type="text" id="selddate1" autocomplete="off" class="datepicker calIcon">
</div>
<div class="searchBtnHolder">Add another Flight</div>
<div class="clear"></div>
<hr />
</div>
</div>
</div>
I'm not sure to understand your exact desire. Still, did you know that jQuery clone() method takes 2 arguments: withDataAndEvent and deepWithDataAndEvent.
So when you use .clone(), it will only clone the element, not the event associated with. You'll need to use .clone(true,true) to copy all events attached.
http://api.jquery.com/clone/

Wrap children elements of parent elements without class only if they contain text inputs

Consider the following HTML
I am trying to wrap the child elements (label/input) where the label text says 'This one'. Basically, I need to select the full elements without class partial if they contain input text elements and not number uinput elements. One the full elements are selected, their children elements need to be completely wrapped entirely with <div class="wrapped"></div>
<div class="group">
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
<div class="full partial">
<label>Foo</label>
<input type="text"/>
</div>
<div class="full">
<label>Foo</label>
<input type="number"/>
</div>
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
<div class="full">
<label>Foo</label>
</div>
<div class="full partial">
<label>Foo</label>
<input type="text"/>
</div>
<div class="full partial">
<label>Foo</label>
<input type="number"/>
</div>
</div>
Like this:
<div class="wrapped">
<div class="full">
<label>This one</label>
<input type="text"/>
</div>
</div>
You could use a combination of the :not()/:has() selectors to select the desired .full elements. Iterate over the selected elements, and wrap the children elements using a combination of the methods .children()/.wrapAll():
Example Here
$('.group .full:not(.partial):has(input[type="text"])').each(function () {
$(this).children().wrapAll('<div class="wrapped"/>');
});
Alternatively, you could also use the following:
Example Here
$('.group input[type="text"]').closest('.full:not(.partial)').each(function () {
$(this).children().wrapAll('<div class="wrapped"/>');
});
I'm not sure where approach is faster.. probably the first one.

Copy element with its properties in mootools

The Following is the code I am using in Mootools,
var company_name = $('company_name-wrapper').clone();
company_name.inject($('wmd-button-bar'));
The HTML is as follows,
<div id="company_name-wrapper" class="form-wrapper" style='float:left;'>
<div id="company_name-label" class="form-label">
<label for="company_name" class="required">
Company
</label>
</div>
<div id="company_name-element" class="form-element">
<input type="text" name="company_name[]" id="company_name" value="">
</div>
</div>
..............
..............
<div id='wmd-button-bar'></div>
The Output I am getting after executing the code is,
<div id='wmd-button-bar'>
<div class="form-wrapper">
<div class="form-label">
<label for="company_name" class="required">
Company
</label>
</div>
<div class="form-element">
<input type="text" name="company_name[]" id="company_name" value="">
</div>
</div>
</div>
The Id's or the style of any elements is not getting cloned.
Any help or suggestion is appreciated,
thanks in advance.
Mootools avoids copying ID's to avoid getting double ID's, but you can override that using .clone([contents, keepid]) keepid function paramenters.
So try using: var company_name = $('company_name-wrapper').clone(true, true);
Demo
Notice that doing so you will have duplicate ID's and that is invalid HTML, it will give you problems when you try to refer to different elements with the same ID.

Changing classes on multiple divs when selecting specific radio buttons

Hey everyone I got a javascript problem I can't seem to find a specific solution for on the web. What I want to be able to do is select one of the radio buttons and have that change the class of #home-right to either .rackmount or .shipping and add the class of .displaynone to the type of dimensions I don't want shown.
<div id="home-right" class="rackmount">
<h4 class="helvneuebcn">Case Finder</h4>
<div class="cta-options">
<input type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>
<input type="radio" value="Rackmount Enclosures" name=""> Rackmount Enclosures<br/>
</div>
<div class="shipping-dimensions displaynone">
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">H x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">W x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">L</span></div>
</div>
<div class="rackmount-dimensions">
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">U Height x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">Rack Depth</span></div>
</div>
<div class="clear"></div>
<input type="button" value="Submit" class="findcase">
</div>
Use a onClick handler on your radio buttons to do your stuff. Example:
<input onCLick="..." type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>
Also use jQuery if you ain't already - it will save you some time and its very easy to do this kind of functionality.

Categories