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>
Related
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 am using ng-repeat to generate multiple drop down. But after storing the values it is not selecting the dropdown values as previously selected. In this example it should automatically display teacher1, teacher3 and teacher5 as selected values.
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="(i,teacherList) in Trip.teachers track by $index">
{{Trip.teachers[$index].id}}
<select m-required="true" ng-model="Trip.teachers[$index].id" class="teacher form-control" >
<option value="">Select Teacher</option>
<option ng-repeat="teacher in teachers" value="{{teacher.id}}">{{teacher.name}}</option>
</select>
</div>
<button ng-click="addTeacher();">Add Teacher</button>
<button ng-click="removeTeacher();" style="display:none;" class="removeTeacher">Remove</button>
</div>
and my angular code as below:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
$scope.Trip={
teachers : [
{"name":"teacher1","id":"1"},
{"name":"teacher3","id":"3"},
{"name":"teacher5","id":"5"}
]
};
$scope.teachers=[
{id:"1","name":"teacher1"},
{id:"2","name":"teacher2"},
{id:"3","name":"teacher3"},
{id:"4","name":"teacher4"},
{id:"5","name":"teacher5"},
{id:"6","name":"teacher6"}
];
$scope.addTeacher=function(){
$scope.Trip.teachers.push({"name":"","id":""});
document.getElementsByClassName("removeTeacher")[0].style.display="block";
}
$scope.removeTeacher=function(){
$scope.Trip.teachers.pop();
if($scope.Trip.teachers.length==1){
document.getElementsByClassName("removeTeacher")[0].style.display="none";
}
}
})
Here is the link to JSFiddle:
http://jsfiddle.net/dipgupta1986/10z7mda2/10/
It seems that you want to show the default value pre-selected, you can use ng-options and ng-model for setting the default value, by rewriting select as below :
<select m-required="true" ng-model="Trip.teachers[$index]"
ng-options="option.name for option in teachers track by option.id" >
Demo
ng-Options Documentation
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 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/
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