when am using this code.selected value shown as empty.i want select 1st value as one.
<select class="form-control" name="cityID" id="Select1" ng-change="RoomSelect()" ng-model="sRoom">
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
When am using ng-model at the time default value selected as empty.otherwise its ok.
Try init sRoom model in controller
$scope.sRoom = 1;
also its better use ng-options instead of repeat option in select tag.
Demo
var app = angular.module('anApp', []);
app.controller('aCtrl', function($scope) {
$scope.sRoom = 1;
$scope.chooses = [{"key":"one","value":1},{"key":"Two","value":2},{"key":"Three","value":3}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="anApp" ng-controller="aCtrl">
<select ng-change="RoomSelect()" ng-model="sRoom" ng-options="k.value as k.key for k in chooses">
</select>
</div>
Try this
<select class="form-control" ng-init="sRoom=1" name="cityID" id="Select1" ng-change="RoomSelect()" ng-model="sRoom">
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
You can also use ng-init
<select class="form-control" ng-init="sRoom=1" name="cityID" id="Select1" ng-change="RoomSelect()"
Related
I have a angular dropdown cmbAll and list of cmbFruit in ng-repeat. I want when i change cmbAll selected value on cmbFruit [i] also change. But on load cmbAll is populated with -1 indexselected and cmbFruit [i] with their specific indexex. Below is the code. Please suggest.
<select id="cmbAll" tabindex="" title="" ng-change="onChange()">
<option value="">-Select One-</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Mango</option>
<option value="4">Papaya</option>
<option value="5">Pear</option>
</select>
<div data-ng-repeat="x in InfoList">
<select id="cmbFruit" name="cmbFruit" ng-model="x.Name"
ng-options="c.Value as c.Text for c in x.List"></select>
</div>
What should be the code for onchange()
Take ng-model for cmbAll
<select id="cmbAll" tabindex="" title="" ng-change="onChange()" ng-model="cmbAll">
<option value="">-Select One-</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Mango</option>
<option value="4">Papaya</option>
<option value="5">Pear</option>
</select>
<div data-ng-repeat="x in InfoList">
<select id="cmbFruit" name="cmbFruit" ng-model="x.Name"
ng-options="c.Value as c.Text for c in x.List"></select>
</div>
Controller.
$scope.onChange = function()
{
for(var i=0 ; i < $scope.InfoList.length; i++)
{
$scope.InfoList[i].name = $scope.cmbAll
}
}
This will assign the value selected in cmbAll to second dropdown.
I am trying to preselect a value in a dropdown/selectbox in Angular. It should be really simple, but it will not work.
This is my markup:
<select name="type" ng-model="ctrl.typeId" required>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
<option value="3">Type 3</option>
<option value="4">Type 4</option>
</select>
In my controller i simply have:
vm.typeId = 2;
But it does not select anything. Instead, when using inspector on the dropdown element i see a new <option> with the value "? number:2 ?".
What am i missing?
Not need to ctrl in controller
$scope.typeId="2"
for selecting option with value 2
var app = angular.module("app",[]);
app.controller("ctrl" , function($scope){
$scope.typeId ='2';
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select name="type" ng-model="typeId" required>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
<option value="3">Type 3</option>
<option value="4">Type 4</option>
</select>
</div>
Select dropdown will give you a string so if you want to set something in dropdown you should initialize its model with a string value not number value.
Try this - vm.typeId = "2";
How can I remove the first empty < option > in the select drop down? I just want the first < option > to be the "-Select-".
html
<div ng-controller="ExampleController">
Distance in KM
<span class="nullable">
<select ng-model="myColor" >
<option value="null">- Select -</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</span><br/>
</div>
script
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myColor = '';
}]);
Use ng-init to initialize default blank value and also set blank value in option element:
<div ng-controller="ExampleController" ng-init="myColor = ''">
Distance in KM
<select ng-model="myColor">
<option value="">- Select -</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
Or since you are already initializing it in controller, just delete null from option.
I expect the following code to render a drop down list with the third option selected by default. However, when I bind the select with angularjs, the default selection disappears. Any thought?
var myApp = angular.module('myApp', []);
...
<div>
<select id="myselection" ng-model="selectedColors">
<option value="1" >Red</option>
<option value="2">Blue</option>
<option value="3" selected="selected">Green</option>
</select>
<div>
Selected Colors: {{selectedColors }}
</div>
</div>
Here's a working example: http://jsfiddle.net/TXPJZ/134/
Thanks!
The easiest way to fix your implementation is to use ng-init.
<div>
<select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
</div>
Try it on FIDDLE.
Angular overrides the "selected" property when you bind the select to a model. If you inspect the rendered DOM you will find that a new item has been added:
<option value="? undefined:undefined ?"></option>
In order to automatically select the third option you need to pre-populate the model in scope. There are a few ways to do this, including wrapping the select in a controller:
<div ng-controller="MyCtrl">
<select id="myselection" ng-model="selectedColors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
And then defining that model in the controller.
var myApp = angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.selectedColors = 2;
}]);
Here's a running example.
http://jsfiddle.net/93926/
Alternatively, you could just initialize it using ng-init such as in this example:
<div ng-init="selectedColors=3">
http://jsfiddle.net/9JxqA/1/
EDIT: Removed the selected property in the first example, it's no longer needed.
By adding option with empty value to select and initializing selectedColors to empty string(ng-init="selectedColors=''"), we can see 'select Color' option on top instead of having first color to be selected defaultly:
<div>
<select id="myselection" ng-init="selectedColors=''" ng-model="selectedColors">
<option value="">Select Color</option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
Try it on Fiddle http://jsfiddle.net/CodecPM/qxyckf7u/
You need to do only two things
1)ng-init="days='noday'"
2)ng-selected="true"
<select class="filtersday" ng-init="days='noday'" ng-model="days">
<option ng-selected="true" value="noday">--Select Day--</option>
You should use single quote to work per
<select ng-model="liveDataType" ng-init="liveDataType='1'" class="form-control input height" required>
<option value="1">Running data</option>
<option value="2">Rest Data</option>
<option value="3">All Data</option>
</select>
Use ng-selected="true"
Check the below code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<select ng-model="foo" ng-app >
<option value="1">1</option>
<option ng-selected="true" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Why is this repeater broken
<select name="quarter" ng-model="Quarter" ng-selected="Quarter" >
<option ng-repeat="v in [1,2,3,4]" value="{{v}}">Q{{v}}</option>
</select>
But not the handwritten way?
<select name="quarter" ng-model="Quarter" ng-change="onQuarterChange()" ng-selected="Quarter">
<option value="1">Q1</option>
<option value="2">Q2</option>
<option value="3">Q3</option>
<option value="4">Q4</option>
</select>
stick with ng-options
<div ng-app>
<h2>Todo</h2>
<div ng-controller="QuarterController">
<select name="quarter" ng-model="Quarter" ng-options="obj.value as obj.text for obj in [{'value': 1,'text' : 'Q1'},{'value':2,'text':'Q2'},{'value':3,'text':'Q3'},{'value':4,'text':'Q4'}]">
</select>
</div>
</div>
function QuarterController($scope) {
$scope.Quarter = 2;
}
http://jsfiddle.net/hDNsm/3/
you might as well define the array in your controller
Notice two things:
'ng-selected' directive should be written on the 'option' element and not on the 'select' element.
the content of the 'ng-selected' attribute should be a condition in which the option is selected. a simple example for this could be if the value of the option equals the select model.
Your code should be something like this:
<select name="quarter" ng-model="Quarter">
<option ng-repeat="v in [1,2,3,4]" value="{{v}}" ng-selected="v==Quarter">Q{{v}}</option>
</select>