Ok so I have a select
<select id="minutes-to-dropdown"
required=""
ng-model="AddEventPopupStore.ToMinutes"
name="minutes-to-dropdown"
ng-change="AddEventPopupStore.UpdateTimeFromPopup()"
ng-options="num as num for num in [0,15,30,45]"
class="popup-subdropdown">
<option disabled="" value="">min</option>
</select>
and it's used for a popup which is toggled via ng-show (not sure how this affects destructing/recreating scope)
What happens is that the selected property does not update properly when the selection changes from both clicks and model. After a few updates I get
<select id="minutes-to-dropdown"
required=""
ng-model="AddEventPopupStore.ToMinutes"
name="minutes-to-dropdown"
ng-change="AddEventPopupStore.UpdateTimeFromPopup()"
ng-options="num as num for num in [0,15,30,45]"
class="popup-subdropdown">
<option disabled="" value="" selected="selected">min</option>
<option label="0" value="number:0" selected="selected">0</option>
<option label="15" value="number:15" selected="selected">15</option>
<option label="30" value="number:30" selected="selected">30</option>
<option label="45" value="number:45" selected="selected">45</option>
</select>
and while the model changes when I pick another value, if I close the popup and reopen it the the model and the selection don't match because the last selected value is shown instead of the actual selected from model.
How do I force updating of the selection to the actual selection from model? I suppose I might have to force removing of all the selecteds and reapply it to the new one.
Related
I am using parsley.js, I have native dropdown I have a certain list with a specific value to it, I want to trigger parsley error when value="noValue" (select) is selected.
<select required="true">
<option value="NoValue">Select</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>
so when the user selects "select(value="novalue")" parsley should trigger an error if required="true" and show an error message and append parsley-error class on the select/parsley-success if any other value is selected.
Thanks in advance
Have a look at custom validators - they'll help to achieve that behaviour.
Or...if your option values are really single letters, you can use a regex-pattern such as \w for any single word-character. It will fail for "NoValue".
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.
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.
I've bound newParty.party_type.code model to dropdown. On changing its value from controller it is adding another option with value ? number:2138 ? even if option with value 2138 is already contained in select element.
<select id="partyType" name="partyType" class="ng-valid valid ng-dirty" ng-model="newParty.party_type.code">
<option value="? number:2138 ?"></option>
<option value="2138">value 1</option>
<option value="1689">value 2</option>
</select>
I also tried converting newParty.party_type.code to string in controller. But it still adds new option with value ? string:2138 ?
<select id="partyType" name="partyType" class="ng-valid valid ng-dirty" ng-model="newParty.party_type.code">
<option value="? string:2138 ?"></option>
<option value="2138">value 1</option>
<option value="1689">value 2</option>
</select>
If I select any option manually, model gets correct value. But via controller, it's not working.
Why is this happening? How does angular data bindings work? Do I need to be type-aware when dealing with model properties?
EDIT1: Options in select tag are loaded dynamically after page load. (after ng app init) I tried putting some static data and it is working fine. It has something to do with angular not being able to process dynamically loaded data outside angular controllers.
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