I have a select box that displays GeoAreaName, I need the GeoAreaId of that selection to populate a input field. I have done something similar with a typeahead input but I am unable to apply it here.
plunkr
<label>Geo Area:</label>
<select ng-controller="JobMiscCtrl" ng-model="currentItem.GeoAreaName" ng-options="job.GeoAreaName for job in geoAreaArray">
<option value=""></option>
</select>
<input type="number" ng-model="currentItem.GeoAreaId" />
I have edited your plunker. http://plnkr.co/edit/Ms3qPcwj6dxVF3y75ljZ?p=preview
You had 2 problems.
Your input field was out of the scope of your ng-controller declaration
Your ng-options expression needed to be slightly different.
<select
ng-model="currentItem"
ng-options="job.GeoAreaId as job.GeoAreaName for job in geoAreaArray">
<option value=""></option>
</select>
Related
How can I pre-select an option, when I have the options repeated using ng-repeat, as so:
<select data-ng-model="info.country" ng-change="changeCountry()" name="country" required>
<!-- <option selected disabled hidden value=''></option> -->
<option data-ng-repeat="country in countries" value="{{country.id}}">{{country.countryName}}</option>
</select>
The data-ng-model returns the number 3 , the method ng-change="changeCountry()" uses the same number in its implementation.
I need the pre-selected item to be 3 and not 1 (this will be reduced by 1, since it is an array, but I think you get the idea)
I need to pre-select the item. Is this possible, and how can one achieve such result?
CodePen here.
ng-repeat on <options> converts id to string. This is a reason why it doesn't work.
{"country":3} vs {"country":"3"}
You can solve it by using ng-options:
<select data-ng-model="info.country"
ng-change="changeCountry()" name="country"
ng-options="c.id as c.countryName for c in countries"
required>
</select>
I managed to achieve this by using ng-options:
<select ng-options="country.id as country.countryName for country in countries" ng-model="info.country" ng-change="changeCountry()" name="country" required></select>
This Is my select tag. i want to make this As editable.
if possible change this as Input text.
here my ng-model is object showing as list.productcode.
<select class="default form-control" ng-options="list.productcode for list in getproductList" ng-model="list"></select>
please help how to change this.
This may help you
datalist
is the html5 tag
<input type="search" ng-model="txtModel" list="list" />
<datalist id="list" ng-model="list">
<option data-ng-repeat="data in list" value="{{data.ColumnName}}">
</option>
</datalist>
Note ColumnName is the Name of Column you can use
I have some doubts with using ngoptions. I am not able to set value attribute for the option items.Here is example plunker
$scope.ListOfValues=[{optiontext:'Active',optionvalue:'opt1'},
{optiontext:'inactive',optionvalue:'opt2'},
{optiontext:'terminated',optionvalue:'opt3'}];
And my html code is
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues">
</select>
The generated html is as shown below.
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues" class="ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="string:opt1" label="Active">Active</option>
<option value="string:opt2" label="inactive">inactive</option>
<option value="string:opt3" label="terminated">terminated</option>
</select>
I was expecting it to be as shown below
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues" class="ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="opt1" label="Active">Active</option>
<option value="opt2" label="inactive">inactive</option>
<option value="opt3" label="terminated">terminated</option>
</select>
So why does it add string: to the value attribute? How i can get my desired output?
It has to deal with 1.3 -> 1.4 Angular version API change - if you check this plunkr (v.1.3) it will show just indexes as values of the <option> tags.
To make it also work with Angular +1.4 you should add the following statement to your ng-options expression track by emp.optionvalue. See this plunkr (v.1.4) .
<select id="emptype"
ng-model="empstatus"
ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues track by emp.optionvalue">
</select>
But the value of the ng-model is correctly updated in both cases, see {{empstatus}} in template of my examples.
So as #ExplosionPills say that should not be a issue.
By default angular uses an empty value if nothing has been selected in a <select>. How can I change this to a text that says Please select one?
You didnt provide any code so I can't give an example relative to your code, but try adding an option element, e.g.
<select ng-model="item" ng-options="item.category for item in items"
ng-change="doSomething()">
<option value="">Please select one</option>
</select>
Via the ng-selected attribute:
<select>
<option>Hello!</option>
<option ng-selected="selected">Please select one</option>
<option>Another option</option>
</select>
Check out the reference: https://docs.angularjs.org/api/ng/directive/ngSelected
I'm trying to do something like this
but instead of having alert boxes just having comma separated values in the input feild.
Ok I'm trying ui-select2 but I'm not very clear about how to use it. I will provide samples of what I have as a working typeahead and what I have done to try to get the select2 to work.
ui-bootstrap typeahead:
<input type="text" ng-model="selectedItem.value" typeahead="item.value for item in items |filter:$viewValue| limitTo:8" typeahead-on-select="updateItem()" placeholder="select Item"/>
ui-select2 (can't load data.)
<select ui-select2 ng-model="selectedItem.value" data-placeholder="Select Item">
<option value=""></option>
<option ng-repeat="item.value for item in items" value:"{{item.value}}>{{item.label}}</option>
</select>