ng-Selected functionality not working in Kendo Dropdown - angularjs

I have two options like '+' and '-' in Select Tag. Here is my Code
<select kendo-drop-down-list k-ng-model="Directions">
<option ng-selected="Direction==0" value="0">+</option>
<option ng-selected="Direction==1" value="1">-</option>
</select>
when removing the 'kendo-drop-down-list' in select tag ng-select is working fine.
I want to keep kendo-drop-down-list along with ng-select should work.

Related

How to select options in Angular JS?

I have generated SELECT list by php.
How I can select some option in this select list?
<select name="language[]" ng-model="formData.language" id="language" ng-required="true">
<option value="72" selected="selected">Fulfulde</option>
</select>
Try to use ng-options attribute
<select ng-model="myColor" ng-options="color.name group by color.shade disable when color.notAnOption for color in colors"> </select>
For more info my go through this link
I'd recommend you to use ng-options directive to work with select box.
<select ng-model="myColor" ng-options="color.name for color in colors"></select>
Working Plunkr

Default text in Angular select

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

How to bind the Id of a select box selection

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>

Angular set tag as selected

I'd like to set the ng-class of a optiones-element as active. Unfortunately it doesn't work.
This is my option-menu:
<select>
<option ng-repeat="item in items">{{item}}</option>
</select>
and the item "one" should be active
<select>
<option ng-repeat="item in items" ng-class="{selected: item=='one'}">
{{item}}
</option>
</select>
It doesn't work. Does anyone know how to set the option tag as active?
An example of how it works is this:
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
Below is the right way "select" works in Angularjs, notice the included ng-model directive, if missing it doesn't work.
<select ng-model="selectedItemId" ng-options="item.id as item.name for item in items">
<option value="">-- choose item--</option>
</select>
to make an item of the list active, just set SelectedItemId variable assigned to ng-model at controller side.
$scope.selectedItemId = 1; //the Id belonging to the option to be selected
I see that you want to loop over the options using ng-repeat and then manually select the right option. It is nicer to use the select directive of Angular in that case:
<select ng-model="selectedItem" ng-options="items"></select>
See https://docs.angularjs.org/api/ng/directive/select for more information.

ng-selected option interpolation failing in IE10

I've got an select block that looks like this:
<select ng-model="customfield">
<option value="" disabled>Map to field</option>
<option ng-repeat="option in fields" ng-selected="option.id === customfield.id" value="{{option.id}}">{{ option.custom_name }}</option>
<option disabled>---</option>
<option value="-1">Create new custom field</option>
</select>
On IE the selected option initially fails to interpolate. It shows up as {{ option.custom_name }}. If I click into the select box and click out of it the option shows up correctly. Any ideas on how to work around this?

Resources