binding data from controller into select box in Angular.js - javascript

I am building an application with Angular js.
I am retrieving a JSON and display in a HTML form.
HTML:
<select class="select optional" ng-model="to"
ng-init="to=$parent.$eval('eligibiltyRules.condition.itineraryZone.to')">
<option value="USD">USD</option>
<option value="Euro">Euro</option>
<option value="Rupees">Rupees</option>
</select>
js:
myApp.controller('eligibilityController', function($scope,sharedProperties) {
$scope.eligibiltyRules=[];
$scope.eligibiltyRules = sharedProperties.getProductEligibilityData();
console.log($scope.eligibiltyRules); //contains the JSON to be displayed in the form
console.log($scope.eligibiltyRules.condition.itineraryZone.to); //contains data to be displayed in selectbox
});
I am able to display the respective JSON values in other form elements.
But not able to populate the data to be displayed in select box.
Please Advice

Related

updating data in a list onchange of a drop down and when completed sending the data to servlet

I am fetching data in an arraylist and displaying it in JSP , some of the fields have drop down values and in JSP i can update \ change some values of the drop down ,
My requirement is when I change dropdown values ( more than one ) of multiple fields I should be able to submit updated list to servlet.
Please suggest how can i keep on adding multiple vales to an ArrayList onchange of a dropdown and then when all the the proper values are selected ,I should be able to submit the new arraylist to a servlet for further processing .
If I get your question correctly, you want to select maultiple values from a dropdown then why dont you select a multiselect type of box where in the values selected are mapped to your bean property and sent to your servlet.
you can try this html tag
<select id="country" name="country" multiple="multiple">
<option value="US">United Stated</option>
<option value="CHINA">China</option>
<option value="SG">Singapore</option>
<option value="MY">Malaysia</option>
</select>
using spring form you can do it with below tag
<form:select path="country" items="${countryList}" multiple="true" />
for struts you can use following
<html:select property=”selectedValues” multiple=”true” size=”5″>
<html:option value=”0″>Select Country</html:option>
<html:optionsCollection property=”countryList” label=”countryName” value=”countryId” />
</html:select>
suppose you have the input form with a array selectedvalues and countrylist with dropdown values. When you will chose selectedvalues will have the required selected inputs.

How to load json files list into dropdown box using angularjs?

I have three json files, I wanted to load or get those json files list into my dropdown box. How can I do this using angularjs ? Please help me and thanks in advance. I have created Plnkr.
I have got to know and I am getting my json values list in the dropdown box by putting like:
<select name="jsonfilenames">
<option name="none">Select</option>
<option name="test1 json" >{{values1}}</option>
<option name="test2 json">{{values2}}</option>
<option name="test3 json">{{values3}}</option>
</select>

dropdown and textarea binding with AngularJS

I have a very simple scenario and I wanted to use AngularJS for that. I am not able to get this one right.
I am retrieving data from database and directly writing it into the view inside dropdown. From their based on which item is selected, I want to populate the value into textbook.
So my code for it is as follows:
<select>
<option selected="selected" disabled="disabled">dropdown</option>
#foreach (System.Data.DataRow row in ViewBag.Template.Rows)
{
<option value="#row[1].ToString()">#row[0].ToString()</option>
}
</select>
<textarea></textarea>
I am trying to achieve following:
whatever option user select, the corresponding value for the item be populated into text area.
Please suggest how can I achieve using AngularJS.
You should use ngModel directive for that, the same for both select and textarea:
<select ng-model="selectModel">
<option selected="selected" disabled="disabled">dropdown</option>
#foreach (System.Data.DataRow row in ViewBag.Template.Rows)
{
<option value="#row[1].ToString()">#row[0].ToString()</option>
}
</select>
<textarea ng-model="selectModel"></textarea>
Demo: http://plnkr.co/edit/XOs6wUyqdr3ZlFtBq3RB?p=preview

multiselect dropdown sorts based on value present in option tag

I am having a multiselect dropdown whose value are populated based on iteration through for each. However the order I am sending the data is not maintained.
Please suggest what should I do.
<select id="secWhse" path="secondaryWarehouse" multiple="true" style="display: none;"
title="Select the secondary warehouse to which you want to give access to the user.">
<option value="1">Enterprise</option>
<option value="14">enter2</option>
<option value="17">enter3</option>
<option value="19">4thenterprise</option>
</select>
But if I am able to print the value directly, Its printing in my order.
UPDATE: Plugin we are using is: http://wenzhixin.net.cn/p/multiple-select/docs/#multiple-select
CODE:
$('#secWhse').multipleSelect({ filter: true,multiple: true});
JSP code to populate select tag:
${item.value}

Select model according to brand drop down

i have two drop down boxes
the first drop down contain the mobile brands
and other contains the mobile models
i want them to work like when in first drop down a brand is selected
the second drop down will show models of that particular brand i want to do it with javascript
the drop down values are static values
how i can do that?
<select name="brand">
<option value="samsung">Samsung</option>
<option value="Nokia">Nokia</option>
</select>
<select name="model">
<option value="Galaxy">Galaxy</option>
<option value="N8">N8</option>
</select>
The Drop down will be like the above ones
Use ajax record on the first celect box change and fill it in the second select box. Jquery ajax will function will send data to a function which will fetch data from database .

Categories

Resources