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.
Related
I see a blank drop down, which I suspect is due to an additional option that gets injected. If I am able to remove this additional option generated, I think, my problem will be solved.
Auto-injected Option:
<option value="? number:1 ?" selected="selected"></option>
My View:
<select id="myValue"
ng-model="myObject.value"
ng-change="foo()">
<option value="0"
localize="MyValue0"
ng-selected="myObject.value === 0"></option>
<option value="1"
localize="MyValue1"
ng-selected="myObject.value === 1"></option>
</select>
How can I conver myObject.value to number? I have tried ng-Model = "parseInt(myObject.value)" and ng-model = "myObject.value | number". Both throw a nonassignable element error. I am using Angularjs 1.6 and moving away from directives, so creating angular.directive function may not be an option
I believe it's Angular best practice to use the ngOptions directive, documented here.
Also, regarding the first option being <option value="? number:1 ?" selected="selected"></option>, I suspect that's because the initial value of myObject.value doesn't match any of the possible options values.
Try this:
<select id="myValue" ng-model="myObject.value" ng-change="foo()"
ng-options="item for item in options">
<option value="" disabled selected style="display:none;">Placeholder</option>
</select>
JSFiddle here showing that myObject.value is a number.
Updated JSFiddle to showcase the dropdown without a placeholder.
I have started leaning AngularJS.
In AngularJS if we have to initialize an element lets take an example of select:
<select id="s1" ng-model="vsrc" ng-init="vsrc='a.mp4'">
<option value="a.mp4">First video</option>
<option value="b.mp4">Second video</option>
</select>
why initialization of vsrc='a.mp4' in ng-init is required, when I was giving its value like ng-init='a.mp4' it was not working I had to give like ng-init="vsrc='a.mp4'". In normal HTML statement we are directly giving default option by providing value='a.mp4'
<select id="s1" ng-model="vsrc" ng-init="vsrc='a.mp4'"> /*ng-init used to initialize a **variable** before html render, it is a directive which search left and right value always*/
<option value="a.mp4">First video</option> /*value is here as json object {"value":"a.mp4"}*/
<option value="b.mp4">Second video</option>
</select>
take a look over here about ng-init directive
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"
Here's what the code looks like
<select ng-model="nullableInt">
<option></option>
<option value="0">First option</option>
<option value="1">First option</option>
<option value="2">First option</option>
</select>
When nullableInt is null the generated html is
<select ng-model="nullableInt">
<option></option>
<option value="? object:null ?"></option>
<option value="0">First option</option>
<option value="1">First option</option>
<option value="2">First option</option>
</select>
Reproduced in the plunkr here: http://plnkr.co/edit/05pBEMJppmkrn3nFgYdk?p=info
It's worth mentioning that I'm trying to avoid using ng-options, it seems like a bit of overkill to create an endpoint for AngularJS to consume some data that really will not change very often, if ever.
Update 3/29/2017:
As Jorge Rodrigues dos Santos stated, this should be handled in a different way for newer versions of angular. Below is taken from the current documentation for angular 1.6.3
Optionally, a single hard-coded element, with the value set
to an empty string, can be nested into the element. This
element will then represent the null or "not selected" option. See
example below for demonstration.
https://docs.angularjs.org/api/ng/directive/select
Angular is creating a new option to represent the null value. It didn't find one of the options you provided in the HTML.
To bind to null, set the value="null" on the first option
<option value="null"></option>
http://plnkr.co/edit/kzPVu4hiMcP6wA6crGYt?p=preview
The accepted answer didn't work for me because my property could be blank, null, or undefined. If you are using version 1.3+ then you can use a getterSetter to coerce the value to blank.
I was dealing with string values. You'll have to handle 0 or other valid falsy values in the function as well.
$scope.nullableIntCoerced = function(n) {
return arguments.length ? ($scope.nullableInt = n) : ($scope.nullableInt || "");
}
<select ng-model="nullableIntCoerced" ng-model-options="{getterSetter:true}">
<option value=""></option>
...
https://code.angularjs.org/1.3.20/docs/api/ng/directive/ngModel
For more recent versions of Angularjs use <option value=""> - </option> for the null value
Below solution solved the problem for me.
The problem here is when ng-model is used, it adds a default option with value "?" and without using ng-model, one can not use ng-change to get the current selection. I have actually created an onChangeSelection() within which we can set the defaultSelected property of the like below
$scope.onChangeSelection = function(id) {
document.getElementById(id)[0].defaultSelected = true;
$scope.selected = $('#'+id).val();
}
<select id="mySelect" ng-model="nullableInt" ng-options="option.value as option.text for option in arrayContents track by option.value" ng-change="{{onChangeSelection(id)}}" required>
<option value="" ng-if="false"></option>
</select>
This would exclude the default option from the options list and also make the first value as defaultSelected.