The select list below is display empty row instead of the default value "--Weight--" when product.weightUnitMeasureCode is null.
<select ng-model="product.weightUnitMeasureCode">
<option value="">-- Weight --</option>
<option ng-repeat="unitMeasure in unitMeasures |filter:unitMeasure.isSize='false'" value="{{unitMeasure.unitMeasureCode}}">{{unitMeasure.name}}</option>
</select>
Is there a way to make the list display the default option when product.weightUnitMeasureCode is null? I've tried changing the value of the default option to the following but it didn't work.
value="null"
value=null
Looks like you are in wrong direction as far as angular version of select has been concerned.
Try:-
<select ng-model="product.weightUnitMeasureCode"
ng-options="unitMeasure.code as unitMeasure.name for unitMeasure in unitMeasures | filter:unitMeasure.isSize==false">
<option value="">-- Weight --</option>
</select>
I am not sure if you have a field called code in your data model, but you can adjust based on your model.
if you want to filter out ones with unitMeasure.isSize on a static list then you should just filter them at the controller itself and bind only the required list.
Related
I am having a JSON reponse data which is an array representing country code and description
{"codeDescList":[{"desc":"Aruba"}],"codeValueCode":"ABW"},
{"codeDescList":[{"desc":"Afghanistan"}],"codeValueCode":"AFG"},
{"codeDescList":[{"desc":"Angola"}],"codeValueCode":"AGO"},
{"codeDescList":[{"desc":"Anguilla"}],"codeValueCode":"AIA"},
{"codeDescList":[{"desc":"Åland Islands"}],"codeValueCode":"ALA"},
{"codeDescList":[{"desc":"Albania"}],"codeValueCode":"ALB"}
I stored the above array in angularJS scope object as follows
$scope.codeValueData = response.data;
I created select box for countries
<div class="form-group">
<select ng-model="profileBizObj.preferredAddress.countryCode" ng-options="codeValue.codeDescList[0].desc for codeValue in codeValueData track by codeValue.codeValueCode">
</select>
</div>
The select box is created correctly like below
<option value="ABW">Aruba</option>
<option value="AFG">Afghanistan</option>
<option value="AGO">Angola</option>
<option value="AIA">Anguilla</option>
<option value="ALA">Åland Islands</option>
<option value="ALB">Albania</option>
The problem with my code is if profileBizObj.preferredAddress.countryCode is referring to the value "AGO" the select box is not showing the the country "Angola". The select box is showing blank.
I am new to angularJS. Please help to resolve this issue. Thank you
What you try to do can be achieved more easily with an ng-repeat. Try this:
<select ng-model="profileBizObj.preferredAddress.countryCode">
<option ng-repeat="item in codeValueData" value="{{item.codeValueCode}}">
{{item.codeDescList[0].desc}}
</option>
</select>
Here is a working fiddle: http://jsfiddle.net/5s0b0jnz/
Writing below select statement worked for me
<select ng-model="profileBizObj.preferredAddress.countryCode" ng-options="codeValue.codeValueCode as codeValue.codeDescList[0].desc for codeValue in codeValueData">
The select box is populated as
<option value="0">Aruba</option>
<option value="1">Afghanistan</option>
<option value="2">Angola</option>
<option value="3">Anguilla</option>
<option value="4">Åland Islands</option>
<option value="5">Albania</option>
and Selectiong Angola is storing as "AGO" in the model "profileBizObj.preferredAddress.countryCode" which exactly I needed.
Thank You all for the help
Your ng-options is ng-options="codeValue.codeDescList[0].desc for codeValue in codeValueData track by codeValue.codeValueCode">, it means, use the codeValue will be bound to model , and the ...desc as the displayed value. So when your model value is AGO, it can not be referred to some object in codeValueData.
You should set your option value like AGO with this:
ng-options="codeValue.codeValueCode as codeValue.codeDescList[0].desc for codeValue in codeValueData track by codeValue.codeValueCode">
Then the codeValueCode will be applied to your model. And in reverse, for some model value like AGO, the related option will be selected.
I'm trying to modify a form which is using a select box that is populate NOT using ng-options.
The form itself is bound to an angular controller. Is there still a way for me to know the selected value of the select box even though the select values were not build using ng-options?
I have the following
<select ng-model="country" ng-change="checkValue()"
but the checkValue function isn't even firing, apparently.
Any thoughts?
You don't need to use ng-options to get the selected value. As long as your select element uses ng-model the value will be stored there.
For example:
<select ng-model="mySelectValue">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
Now in your controller you would be able to access the value of the select using $scope.mySelectValue.
You should always '.' your scope variables.
$scope.address = {};
Then bind to
ng-model="address.country"
I want to be able to reference the number of items in the ng-options after a filter. Is this possible?
For example, this works:
<select ng-model="selectedItem"
ng-options="_item.id as _item.name for _item in PageModel.objects"
ng-show="PageModel.objects.length>0">
<option value="">-- Select --</option>
</select>
<span ng-show="PageModel.objects.length==0">No objects to display</span>
I can reference the length of the array PageModel.objects and use that to turn components on or off.
But how do I do the same for a filtered array?
<select ng-model="selectedItem.objectId"
ng-options="_item.id as _item.name for _item in PageModel.objects | filter:{type:filterBy}"
ng-show="PageModel.objects.length>0">
<option value="">-- Select --</option>
</select>
<span ng-show="PageModel.objects.length==0" >No objects to display</span>
This will obviously always return the length of the original array, but is there a way to reference the filtered list as that changes?
This is how I would expect it to work:
ng-options="_item.id as _item.name for _item in PageModel.objects | filter:{type:filterBy} as filteredObjects"
And then to be able to use the variable filteredObjects like:
<span ng-show="filteredObjects.length==0" >No objects to display</span>
But this doesn't work.
Here is a fiddle showing the example working. I would like the value (8) to be dynamic.
fiddle example
(The buttons are just used to simulate the desired outcome)
I know I could do it using a watch on the model but can it be done in another way similar to above?
You should apply the same filter in ng-show too.
<select ng-model="selectedItem.objectId"
ng-options="_item.id as _item.name for _item in PageModel.objects | filter:{type:filterBy}"
ng-show="(PageModel.objects|filter:{type:filterBy}) && (PageModel.objects|filter:{type:filterBy}.length>0">
<option value="">-- Select --</option></select>
For a better explanation you can look at this link: http://php.quicoto.com/use-ng-show-filtering-data-angularjs/
Bye
Try this:
Select from a list of {{(PageModel.objects|filter:{type:filterBy}).length}}: <-- need to be able to reference/use this?
<select ng-model="Event.Team" ng-options="a.TeamName for a in Event.Item.TeamNamesList" required="">
<option value="" disabled="" class="">-- Select Your Team --</option>
<option value="0">Team1</option>
<option value="1">Team2</option>
<option value="2">Team3</option></select>
How can I auto select the already saved value on db ?
Here I saved the "Team1" as on DB(string field). This drop down does not have any "value filed" associated with it.Only text fields as Team1,Team2,...
EDIT : On above set-up where I can save the data properly.But the problem I have is when it shows that data again on drop down box.Any help would be much appreciated.
For data like [{"Selected":false,"Text":"Yugoslavia","Value":"244"},{"Selected":false,"Text":"Zambia","Value":"246"},{"Selected":false,"Text":"Zimbabwe","Value":"247"}]
this is what works
<select
ng-model="paymentDetails.BeneficiaryCountry"
ng-options="country.Value as country.Text for country in paymentDetails.BeneficiaryCountryList">
<option value=""></option>
</select>
try this
select ng-model="Event.Team" ng-options="a.TeamName as a.TeamName for a in Event.Item.TeamNamesList" required="">
you can refer below jsfiddle
http://jsfiddle.net/n9rQr/20/
You need to specify which value will be used via the ng-options attribute.
The following should work ng-options="a.TeamName as a.TeamName for a in Event.Item.TeamNamesList".
EDIT:
This way the directive will know which value to select based on the ng-model.
Here is fully working example, the trick is to use track by in select ng-options like so:
<select ng-model="selectedCity"
ng-options="city as city.name for city in cities track by city.id">
<option value="">-- Select City --</option>
</select>
If selectedCity is defined on angular scope, and it has id property with the same value as any id of any city on the cities list, it'll be auto selected on load.
Here is Plunker for this:
http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview
See source documentation for more details:
https://code.angularjs.org/1.3.15/docs/api/ng/directive/select
I have a <select> element with an ng-model=sendTime element to select a time from the list. This list contains only a limited number of standard times, but as a last item it always contains an option for the sendTime in the model:
<select ng-model="sendTime" style="">
<option value="now">now</option>
<option value="08:00">08:00</option>
<option value="17:00">17:00</option>
<option value="{{sendTime}}">{{sendTime}}</option>
</select>
The last item is just to ensure that a custom time (which is not editable in this view) will appear in the selection box. The problem is that Angular doesn't do this correctly. It adds the final element to the list, but it doesn't select it. It only ever selects one of the default times.
How can I fix this?
Change the last option to <option ng-value="sendTime">{{sendTime}}</option>. The behavior will be abit weird though. When you select an other option the value of the last option will change to the selected option. If you don't want this behavior you could do something like this:
<select ng-model="sendTime" style="" ng-init="default=sendTime">
<option value="now">now</option>
<option value="08:00">08:00</option>
<option value="17:00">17:00</option>
<option ng-value="default">{{default}}</option>
</select>
See: http://plnkr.co/edit/YhEgbDSxkE6nYy0FaRVF?p=preview