Display AngularJS inputs from the frontend - javascript

I'm currently working on an AngularJS project where user inputs from a drop down list and a text box on a page can be displayed on a new page. For instance, selecting option of Mr and entering a name which is then displayed on a new page as "You're Mr YourName." How can this be done? Any help?

<select ng-model="title">
<option>Mr</option>
<option>Ms</option>
</select>
<input type="text" ng-model="yourName">
You're {{title}} {{yourName}}

Related

create a drop down list in search bar in HTML

I have created a dropdown list on my webpage using a basic statement in HTML but it is in the body section of my page. I added a search bar in my topnav and have been attempting to move this dropdown list so it appears there once someone clicks in the field or starts to type, but the data in the dropdown list is from an SQL database (corporate company) and not a predefined list such as . I am using local ASP to pull the data from SQL, and HTML & Java to populate it.
Does anyone know how to write the HTML & Java so that the dropdown list with my data appears in the search bar once someone clicks in the search bar? My code is below.
This is my logic that originally worked
<select id="containerlist" onchange="newcontainer()"></select>
This is the logic that I have been trying
<div class="search-container">
<input id='input' type="text" placeholder="Container #.." onkeyup="filterFunction()"<select id="containerlist" onchange="newcontainer()"</select>/>
<button type="submit">Search</button>
</div>
I also tried the code below but not sure what I would put in the value section for the option...
<div class="search-container">
<input type="text" list="containerlist" />
<datalist id="list">
<option> id="containerlist" value="?"</option>
</datalist>
</div>
The output should be, I can click into the search bar, and start to type and the dropdown list will appear and filter as I continue to refine my search.

Search functionality using multiple select option - angularjs

Now I am working in an search functionality module using angularjs, search functionality is implemented by multiple select options, user can select more than one option in select tag, it's not a problem, but I am facing issue to load the saved search details into the select tag,(have to show pre-selected search data into the select tag)
<select name="" ng-model="sex" multiple ng-options="sex.name as sex.name for sex in choosesex">
</select>
which displays the list like Male and Female like below,
$scope.choosesex = [{ID:1,name:"Male"},
{ID:2,name:"Female"}];
I have get the json response from saved search, while pushing the result into the ng-model it doesnot show the selected option in select tag, Please share your opinions regarding this issue to fix. Thanks in advance.
sex.name as sex.name is not right. Try this:
<select name="" ng-model="sex" multiple ng-options="sex as sex.name for sex in choosesex"></select>

how to edit the existing content in the angularjs

Hi Im creating an app using ionic and angularjs. The problem I face is in the editing. I have a two view pages, one view will list the car names, when a car name is selected it will be redirect to the second view page where the information regarding the selected car is listed and also editable . Im able to get it till here but I don't know how to edit the content. I tried using contenteditable along with <div> property but angularjs can't bind the ng-model property. So please help me how to edit the read information so that the edited information are updated. Thank you.
Selected Car:
<input type="text" ng-model="editedName">{{selectInput.name}}</div>
<br><hr>
Selected options:
<div ng-repeat="type in selectInput.types" ng-model="selectedTypes">
{{type}}
</div>
</div>
<br><hr>
<button ng-click="Update($index)">Update</button></div>

Drop down box selection mutes/disables a text area?

I'm using Bootstrap 3 and HTML5 to create a web form. There's a section of the form where the user can select his "Method of delivery" via a drop-down box. The values are: Shop Pick-Up, FedEx, and Null. If the user selects FedEx, he shall then enter in his mailing address in the textarea titled "Shipping Address". However, since we do not need his mailing address if he selects "Shop Pick-Up" or "Null", is there a way to mute or grey-out the text box and only have it be writable if he selects "FedEx"?
Looking for ideas on how to approach this scenario.
My HTML:
<div class="col-xs-3">
<div class="form-group">
<label for="delivery">Method of delivery</label>
<select id="delivery" name="delivery" class="form-control input-lg" tabindex="17">
<option value="options" selected disabled>-Select-</option>
<option value="Shop Pick-Up">Shop Pick-Up</option>
<option value="FedEx">FedEx</option>
<option value="null">Null</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="shippingAddress">Shipping Address</label>
<textarea name="shippingAddress" class="form-control" rows="7" placeholder="" tabindex="18"></textarea>
</div>
You have a few options for dealing with non-required fields. The simplest option would be to add the attribute disabled to the textarea if they choose fedEx.
http://jsfiddle.net/dy4r3/
Your other option is to hide the non-required fields using $.fn.hide() and $.fn.show()
http://jsfiddle.net/ANKXA/
You can obviously expand on these solutions to make them a bit more elegant, but this should get you in the right direction.
You can use the change event and update the text box based on the selected value.
$('#delivery').on('change', function(e){
if($(this).val() == 'FedEx')
$('#shippingAddress').prop('disabled', false);
else
$('#shippingAddress').prop('disabled', true);
});
Give the shippingAddress element an id (it should have one for the label for)
Then you can set the disabled attribute when the select box changes
$('#delivery').change(function(){
$('#shippingAddress').prop('disabled', !($(this).val() == "FedEx"));
});
The disabled property of textarea can help you here.
Fiddle Demo
But showing and hiding would be better.
But there showing and hiding will make your form shake so apply some animation to avoid that or go with this approch but this approch also has some flaws as the user is nt directly clear when he will be allowed to enter the address.
I prefer going by show and hide as it is easy and informative.
Here is demo with show and hide

How do I change the header of a jQueryMobile multiple select dialog?

The documentation says - When a select is large enough to where the menu will open in a new page, the placeholder text is displayed in the button when no items are selected, and the label text is displayed in the menu's header. This differs from smaller overlay menus where the placeholder text is displayed in both the button and the header, and from full-page single selects where the placeholder text is not used at all.
I see 2 options here. 1, fix my code to where my label actually hides (I can't figure this out). or 2. Make the multiple select box display the placeholder in the header instead of the label.
Thanks for your help.
Here is the code I'm using:
<div data-role="fieldcontain" class="ui-hide-label">
<label for="abc" class="ui-hidden-accessible">Select</label>
<select name="abc" id="abc" multiple="multiple" data-native-menu="false">
<Option data-placeholder="true">Select Multiple</option>
<Option>Option1</option>
</select>
</div>

Categories

Resources