DEMO
I have an select tag which i am using ng-model to get the selected value. The Select tag shows Empty first value, it should be showing Choose. What i am doing wrong?
<select ng-model="todo.opts">
<option>Choose</option>
<option><25%</option>
<option>25-50%</option>
<option>>50%</option>
</select>
Try to set the todo.opts variable in the scope as the value you want to select as a default.
By the way check documentation for the ng-option
Since your model will be empty to begin with, you can easily select the Choose option by giving it an empty value:
<div ng-app="app" ng-controller="myCtrl">
<select ng-model="opts">
<option value="">Choose</option>
<option><25%</option>
<option>25-50%</option>
<option>>50%</option>
</select>
</div>
Here is an updated fiddle.
Related
<div class="filter-box">
<select ng-model="$ctrl.customModel"
ng-options= 'option.id as option.name for option in transactionstatusList'
ng-change="transactionStatusChange()">
<option value="" selected="selected">No Search</option>
</select>
</div>
I am using angularjs ng-options to show data in select box but in option i have one hard-coded value is No-search how to show that value select at first because when data comes dynamically it shows first value from the data
Your code should work well if you have undefined customModel.
$scope.customModel;
Demo 1
However, if $scope.customModel is predefined, after async call, selected option jumps regards to ng-model
Demo 2
I am facing some issue on select tab when using in ng-repeat.
On Stackoverflow i found many solution related to my broblem but i am not able to solve my broblem.
Here is my code..
on the top of page i define my controler
<ion-view view-title="Product" ng-controller="productCtrl as pd">
and on controller
self.pdata = response;
On html page my code is..
<div ng-if="pd.pdata.optionid.length > 0" class="prodetail" ng-repeat="x in pd.pdata.optionid">
<h5>{{x.title}}</h5>
<select name="{{x.title}}" ng-model="pd[x.title]" style="right:5px;">
<option ng-repeat="y in pd.pdata.optionvalue[x.option_id]" value="{{y.value_id}}" selected>{{y.title | uppercase}}</option>
</select>
</div>
here my select tab is in ng-repeat loop
so that every time my ng-model is define dynamically.
My Problem is:-extra blank option added using ng-repeat in select tag
modify your select tag like this, it's a bit mouthful but works alternatively you can also keep your option tag and remove ng-options from my select tag.
<select ng-init="pd[x.title] = pd[x.title] || pd.pdata.optionvalue[x.option_id][0].value_id" name="{{x.title}}" ng-model="pd[x.title]" style="right:5px;" ng-options="y.value_id as y.title.toUpperCase() for y in pd.pdata.optionvalue[x.option_id]">
</select>
here is a jsFiddle
Initially problem seems to be here
value="{{y.value_id}}"
see more here The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options
use a hard coded empty value
<option value="" ng-if="false"></option>
I am getting empty Option field in select tag.
My code is shown below:
openSelectBoxModel="47"
openSelectList=[{id:""47",name:"text"}];
valuekey="id";
titlekey="name";
<select id="reportOpenSelectBoxSingle" size="6" ng-style='selectStyle' class="openSelectBox" ng-model="openSelectBoxModel" ng-change="changeFn()" >
<option ng-selected="openSelectBoxModel===item[valueKey]" ng-repeat="item in openSelectList" id="" ng-value="{{item[valueKey]}}" ng-title="{{item[titleKey]}}" ng-bind="item[titleKey]"></option>
</select>
Please help me to solve this problem.
You should not use ng-selected with ng-model.
The thing to do is to bind the selected item to your ng-model before displaying it.
//Also, instead of ng-repeat, you should use ng-option
As far as performance is regarded : ng-options does not create child scopes for every iteration. When angular performs its digest, your ng-repeat will slow it. If you have a list with hundreds of elements, you will feel a difference.
<select id="reportOpenSelectBoxSingle"
size="6"
ng-style='selectStyle'
class="openSelectBox"
ng-model="openSelectBoxModel"
ng-change="changeFn()" >
<option ng-repeat="item in openSelectList"
value="{{item[valueKey]}}"
title="{{item[titleKey]}}"
ng-bind="item[titleKey]">
</option>
</select>
Furthermore, you need to declare your variables inside a controller :
$scope.openSelectBoxModel="47";
$scope.openSelectList=[{id:"47",name:"text"}];
$scope.valuekey="id";
$scope.titlekey="name";
According to the Angular documentation, you can create a null option that is not part of your model. This allows you to have a descriptive option. I.E. in their example they have -- choose color --. How can I make the null option the default option? I want the user to see this descriptive null option when they first load the page.
Bonus points if you can also tell me how to make the null option be disabled via angular.
The value is set to null automatically.
But if you receive data from REST for exaple and it will be set to some value - you can add ng-init to your select tag.
And for disable null option after selection of some value - you need to add ng-disabled to your option tag.
<select ng-model="model" ng-options="item for item in items" ng-init="model = null">
<option value="" ng-disabled="!!model">--Select option--</option>
</select>
And in controller:
.controller('MainCtrl', function($scope) {
$scope.model = 'First';
$scope.items = ['First', 'Second', 'Third'];
});
Demo: http://plnkr.co/edit/esoX26I9bESE59yneOvv
Just use the ng-if to completely remove it once they have a selection. Best option from my experience.
<select name="objectSelector"
ng-model="selectedObject"
ng-options="obj for obj in Objects" required>
<option value="" ng-if="!selectedObject">--- Select Object ---</option>
</select>
If you really, really must show the '--- Select Object ---' after a choice has already been made, then you may just want to insert a second
<option value="" ng-if="!!selectedObject" disabled>--- Select Object ---</option>
Then the visible option will display accordingly...haven't found a simple way to set 'disabled' dynamically.
I am using ng-repeat on option in select.
<select ng-model="mymodel">
<option ng-repeat="p in persons" value="{{p.id}}">{{p.name}}</option>
</select>
$scope.persons= [
{id:1,name:"tester11"},
{id:2,name:'tester22'},
{id:3,name:'tester33'},
{id:4,name:'tester44'}
];
How can I make an option selectable means by default "tester33" should be selected
through use of ng-model.
I know it is achievable through ng-options. But I want to try this one.
Thanks in advance.
There is no perfect way to achieve this using ng-repeat, but here's a workaround:
<select ng-model="mymodel">
<option ng-repeat="p in persons" ng-selected="p.name=='tester33'" value="{{p.id}}">{{p.name}}</option>
</select>
This just sets the option with name='tester33' but the model won't get updated until the user changes select value explicitly
NOTE: This is not a recommended way, you must use ng-options for complete functionality