I have a select/drop-down box in my Angularjs app:
<select ng-model="places">
<option value="1">London</option>
<option value="2">Paris</option>
<option value="3">Madrid</option>
<option value="4">Athens</option>
</select>
but in the HTML page there is an extra blank option added above the London option. When I remove ng-model then it renders as I would expect (i.e. 4 options with London showing by default). Is this normal?
if the value of ng-model i.e. places does not match with the option values than this extra blank option is generated and by default selected.
You need to set ng-model value equals to one of the options or if you do not want any value to be selected by default create one more option with value blank
<option value="">Select</option>
and set ng-model i.e. places to "" in the controller.
In your case you can try this:
var app = angular.module("Demo", []);
app.controller("AppController", function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Demo">
<div ng-controller="AppController">
<select ng-model="places" ng-init="places=1">
<option value="1">London</option>
<option value="2">Paris</option>
<option value="3">Madrid</option>
<option value="4">Athens</option>
</select>
</div>
</div>
Hope this will help you. Thanks.
Related
I have a form using a select. I'm trying to set a default value, which I want to disable, so the dropdown will show "-- select state --" as the first option and will force the user to make a selection.
My problem is it's not working and the select always starts out blank.
Here is my code:
<select ng-model="contactEditCtrl.addressData.state" style="width: 50%;">
<option ng-disabled="$index === 1" ng-selected="true">--Select State--</option>
<option value="{{state.abbreviation}}" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option>
</select>
Check this one with default <option> and ng-options:
<select ng-model="contactEditCtrl.addressData.state"
ng-options="state.name as state.name for state in contactEditCtrl.states" >
<option value="" ng-disabled="true">-- select state --</option>
</select>
Demo fiddle
It will be converted to:
<select ng-model="addressData.state" style="width: 50%;"
ng-options="state.name as state.name for state in states" class="ng-valid ng-dirty">
<option value="" ng-disabled="true" class="" disabled="disabled">-- select state --</option>
<option value="0">CCCCC</option>
<option value="1">QQQQQQ</option>
</select>
The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options. This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don't want to decide model value on its own.
In short: the empty option means that no valid model is selected (by valid I mean: from the set of options). You need to select a valid model value to get rid of this empty option.
Taken from here
So I'd suggest writing it like this.
var app = angular.module('myApp', []);
// Register MyController object to this app
app.controller('MyController', function MyController($scope) {
this.addressData = {state: "--Select State--"};
this.states = [{abbreviation: 'a', name:'ant'}, {abbreviation: 'b', name:'asd'}, {abbreviation: 'b', name:'asd2'}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app='myApp' ng-controller='MyController as contactEditCtrl'>
<select ng-model="contactEditCtrl.addressData.state" style="width: 50%;">
<option value="--Select State--">--Select State--</option>
<option ng-value="state.abbreviation" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option>
</select>
</div>
I have been trying to create a dropdown for my Ionic app where a user can select different times too book an appointment. I set it up so that the hour selected will be a value. However, so far, I have been unable to get it to work. When I try to data bind or view the value in the console nothing appears.
Here is a snippet of what I have so far:
<select>
<option ng-model="bookingInfo.hour" type="time" value="08:00"> 8:00am</option>
<option ng-model="bookingInfo.hour" type="time" value="09:00"> 9:00am</option>
</select>
</label>
I would appreciate being pointed in the right direction.
Thank you.
In order to show the list of booking timings, you can create an array inside your controller and use ng-repeat to iterate over them.
then, your <select> would have an ng-model to bind the selected value.
Here's a working example!
angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.bookingInfo = [
{"hour": "8:00AM"},
{"hour": "9:00AM"},
{"hour": "10:00AM"},
{"hour": "11:00AM"}
]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="myCtrl">
<select ng-model="selectedBooking" name="bookingInfo">
<option value="" disabled selected>Select your booking time</option>
<option value="{{info.hour}}" ng-repeat="info in bookingInfo" type="time">{{info.hour}}</option>
</select>
<div style="margin-top:20px">Selected time: {{selectedBooking ? selectedBooking : 'none'}}</div>
</body>
I have a problem when I change the value of one dropdown on ng-change. It will changes the other dropdown value also even both dropdown ids are different.
anyone knows why its happening?
Below is my code:
<select class="form-control" id="Billable{{$index}}" ng-init="invoice.source_item=''" ng-model="invoice.source_item" ng-change="BillableItemDetails(invoice.source_item,$index)">
<option class="ng-binding" value="">Select Billable Item...</option>
<option class="ng-binding" ng-repeat="BillableItem in BilableItemsList" value="{{BillableItem.id}}">{{BillableItem.name}}</option>
</select>
use different ng-model variable with different dropdown
Here is Plnkr
HTML
<select ng-model="dd1_Value" ng-change="changedd(ddValue.key)">
<option ng-repeat="d in dd track by d.id">{{d.name}}</option>
</select>
<p>DropDown 1 : {{dd1_Value}}</p>
<select ng-model="dd2_Value">
<option ng-repeat="d in dd track by d.id">{{d.name}}</option>
</select>
<p>DropDown 2 : {{dd2_Value}}</p>
Controller
app.controller('MainCtrl', function($scope) {
$scope.dd = [
{id:1,name:'a'},
{id:2,name:'b'},
{id:3,name:'c'},
{id:4,name:'d'},
{id:5,name:'e'},
{id:6,name:'f'}
]
});
Change the value of ng-model="invoice.source_item" to a unique scope variable for each DropDown.
Please see this relevant jsFiddle
Within the code I am trying to fire a method when a different option is selected to alert the user. However no event is being trigged
HTML:
<div ng-controller = "MyCtrl">
<p>Term</p>
<select id = "term" ng-change="test()">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</div>
JS:
var app = angular.module('HelloApp', []);
app.controller('MyCtrl',['$scope','$element', function($scope, $element) {
$scope.test = function () {
alert ("changed!");
}
}]);
You have some issues.
Firstly: <div ng-controller = "MyCtrl"> - you have spaces in between.
Secondly, you're not declaring your app with ng-app. This is because you set your fiddle as jquery, and not Angular. If you had set it as angular you wouldn't need this in the fiddle
This is your fiddle setup
This is an Angular fiddle setup
Thirdly, to use select with AngularJS, you need to have an ng-model on the select tag. In this case i just used bob
<div ng-app="HelloApp"> <!-- declare your angular app. typically would go on body or html -->
<div ng-controller="MyCtrl">
<p>Term</p>
<select ng-model="bob" ng-change="test()">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</div>
</div>
var app = angular.module('HelloApp', []);
app.controller('MyCtrl',['$scope','$element', function($scope, $element) {
console.log('ctrl working');
$scope.test = function () {
alert ("changed!");
}
}]);
Here is a working fiddle
http://jsfiddle.net/ctbLparv/
Also, if your intention is to just set a property based on the selection, you don't need to use ng-change. You can rely on the two-way binding.
So for example, this fiddle: http://jsfiddle.net/ps8jnyL8/
No select is being called. We also default the selected term to 10 when it first loads.
<div ng-app="HelloApp">
<div ng-controller="MyCtrl">
<p>Term</p>
<select ng-init="selectedTerm = '10'" ng-model="selectedTerm">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<p>Selected Term: {{selectedTerm}}</p>
</div>
</div>
Here is the working JSFiddle:
https://jsfiddle.net/G8S32/1162/
The main change was adding this line:
ng-model="items"
which doesn't do anything except update the model and cause the event to fire.
Check out the documentation for ng-change:
https://docs.angularjs.org/api/ng/directive/ngChange
Particularly this line:
The ngChange expression is only evaluated when a change in the input
value causes a new value to be committed to the model.
I have a form with a dynamically generated select list. The values for this list are retrieved from the scope. The currently selected value is also retrieved from the scope.
Unfortunately, there is a synchronization issue.
Below this is illustrated. The dynamic select list shows 1 as selected, but the param is 2. The static select list shows the correct value.
angular.module('fiddle', [])
.controller('Ctrl', function($scope) {
$scope.xs = [1,2,3];
$scope.param = 2;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="fiddle" ng-controller="Ctrl">
Correct representation:
<select ng-model="param">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
Incorrect representation:
<select ng-model="param">
<option ng-repeat="x in xs" value="{{x}}">{{x}}</option>
</select><br>
param: {{param}}
</body>
As I was properly formulating my question, as often, I found the solution already.
I should use ng-options instead of ng-repeat on the option tag.
<select ng-model="param" ng-options="x for x in xs">
</select>
https://docs.angularjs.org/api/ng/directive/select