I have a form where I have to enter a country from a list in order to add different shipping costs to a total. As I am using ngCart directive, I have to use ng-click in order to send that info to the directive.
The problem is that I have two different input options with the same fields in different parts of the form, and I would like to update the value of one when I manually change the other, so that displayed option is always the same in both inputs.
I attach a http://jsfiddle.net/nf2z1a00/ with my code. Thanks in advance!
You can use ng-model on the select and use ng-options to take care of the options and the shipping like this:
<select ng-model="selectedCountry" ng-options="country.name for country in countries" ng-change="changeChipping()">
</select>
I've update your fiddle here
Put same ng-model in you similar select boxes :
<select ng-model="shippingCountry">
//first
</select>
<select ng-model="shippingCountry">
//second : notice the same ng-model
</select>
Related
I am using two combo box.coming to first one,In that what I am select based on that I need to apply second combo box options.So I need to apply two different list in data-ng-options. Eg: in fisrt combo having two options like country names.and second one is states.If I select first combo as India then choose India states in second combo.If I select pakisthan in first combo then need to show pakisthan states in second combo etc.,
use like this.
<select data-ng-model="statename" data-ng-if="country!=2"
data-ng-options="state.ID as state.Name for state in indiasStates"> </select>
<select data-ng-model="statename" data-ng-if="country==2"
data-ng-options="state.ID as state.Name for state in pakistanStates"> </select>
So, in the first select box, you need something like
ng-model="selectedCountry"
ng-options="country as country.name for country in countries"
And in the second one, something like
ng-model="selectedState"
ng-options="state as state.name for state in selectedCountry.states"
ng-if is completely irrelevant here.
Try with condition
ng-options='item for item in (selectedName === "India"? ["KA", "KL", "TN"]: ["AB", "BC"])
Sorry for asking this question again. but I'm new to angularjs. my que is...
I have five drop downs which are loading from json using angular js(ng-option). now I need that if user selecting value in one drop down that same value should not appear in another four dropdowns.
I really want solution. I search a lot and practice more and more but. Couldn't find any solution. Plz plz plz help me.
I'm not sure if I've got your problem right, but I would try to create an array, let's say $scope.selectedOptions. And then on select push the value to this array. After that you can filter the options in other dropdowns with lodash for example.
here is the solution that you can apply in easy way.
one model you sending to other select.
<select ng-model="countryList"
data-ng-options="countryList for countryList in countryListArray" ng-change="getStates(countryList)" >
<option value="" disabled selected>-- Choose Country--</option>
<select ng-disabled="!countryList" ng-model="stateList"
data-ng-options="stateList for stateList in stateListArray" ng-change="getCities(stateList)" >
<option value="" disabled selected>-- Choose State --</option>
</select>
you need to add below code in your dropdown elements so as to avoid recursive calls to all three of your dropdowns during change in ng-model values.
ng-model-options="{ updateOn: 'change', debounce: { change: 0 } }"
Also there is a function which updates data object of your $scope.records array. Please take a look at this fiddle. I think this is what the specific thing is which you wanted.
In the form I have a drop down list with multiple choice, as shown below. Elements are loaded from the database.
<label>Items</label>
<select class="form-control m-b"
ng-model="model.livingComplexId"
x-ng-change="updateOne(model.livingComplexId)">
<option></option>
<option ng-repeat="itemOne in itemsForAddrLevelOne"
value="{{itemOne.id}}">{{itemOne.tobName}}</option>
</select>
I make choose.
For example, I choose an item2.
Then save data. Then, I open the form to edit and I want to see an item that I chose, but the list is empty...
How can I set the previously selected value?
I would recommend to use the ngOptions directive to generate the select menu options:
<select ng-model="model.livingComplexId" ng-options="itemOne.id as itemOne.tobName for itemOne in itemsForAddrLevelOne"></select>
Maybe you could additionally change the ng-model value to model and use ng-options="itemOne as ..." (without the .id) and add an track by itemOne.id.
<select ng-model="yourModel" ng-options="itemOne.tobName for itemOne in itemsForAddrLevelOne"></select>
In the js you should set $scope.yourModel = itemsForAddrLevelOne[0];
I have a select lists with currencies. Its made like this:
<select ng-model="model.currency">
<option value="USD">Amercian Dollars</option>
<option value="EUR">Euro</option>
</select>
I need to find a way so that the option text changes when I select an option. I tried an ng-change but I cant find a way to set the option text. Just to clarify:
The value should be the currency code
The selected text shown should be the currency code
If I click on my select the list of options should be the fullname
So whats missing in the scenario above is to set the value as text when selecting it.
select is a special directive in AngularJS. You need to declare ng-options and set options in controller.
I need to use angular-chosen to customize a drop-down of groups for a project. I use resource to share the data between the controllers. I am able to extract the group list to
$scope.allgroups of my controller. The console.log shows me this image :
In my html, I do call the select in the following way but It always shows "No Group Found.." even with matching characters.
<select
chosen multiple style="width:150px;" id="newusergroups"
class="groupselect" title="Groups"
allow-single-deselect="true"
data-placeholder="Select Group.."
no-result-text="No Such Group.."
ng-model="selectedgroup"
ng-options="pergroup.name for pergroup in allgroups">
<option value=""></option>
</select>
Anywhere I am wrong? Please help.
If the screenshot shows the console.log of allgroups, then your ng-options should be ng-options="pergroup.name for pergroup in allgroups.result", OR allgroups = $myResource.result.