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
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 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.
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.
I have list of locations in a select box. On selection of a location, the corresponding incidenttypes should be displayed in another select box.
$scope.locationNames=[
{id:"Onboard",value:"On-board service"},
{id:"Clubhouse",value:"Clubhouse"},
{id:"Gate",value:"Gate"}
];
$scope.incidentTypesList={
Onboard:[
{id:"IFE faulty",value:"IFE faulty"},
{id:"223",value:"No special meal as ordered"},
{id:"Spoilt",value:"Spoilt/damaged belongings"}
];
Clubhouse:[
{id:"",value"No appointments available"},
{id:"",value="Late/delayed transport service"},
{id:"",value="Facilities not available"}
];
};
I am able to get location names in the list using the below code.
<select class="firstDropDown" ng-model="location" ng-options="item.id as item.value for item in locationNames">
<option value="">Select location</option>
</select>
Can you please help me how to implement on selection on this to show the values in another select box.
I think the solution below fits your needs. There were some syntax errors in your array which needed to be fixed.
HTML
<div ng-app="myApp" ng-controller="myAppCtrl">
<select class="firstDropDown" ng-model="location" ng-options="item.id as item.value for item in locationNames">
<option value="">Select location</option>
</select>
<select class="secondDropDown" ng-model="incident" ng-options="incident.id as incident.value for incident in incidentTypesList[location]">
<option value="">Select incident</option>
</select>
</div>
JS
var myApp = angular.module("myApp", [])
myApp.controller("myAppCtrl", function($scope){
$scope.locationNames=[
{id:"Onboard",value:"On-board service"},
{id:"Clubhouse",value:"Clubhouse"},
{id:"Gate",value:"Gate"}
];
$scope.incidentTypesList={
Onboard:[
{id:"IFE faulty",value:"IFE faulty"},
{id:"223",value:"No special meal as ordered"},
{id:"Spoilt",value:"Spoilt/damaged belongings"}
],
Clubhouse:[
{id:"",value:"No appointments available"},
{id:"",value:"Late/delayed transport service"},
{id:"",value:"Facilities not available"}
]
}
});
JSFiddle: https://jsfiddle.net/ABr/wqy2ha9o/3/