Menu
I have created a select box bound to a model using Angularjs. The select box options load correctly but as soon as select any single option all options disappear from the select box. What is the reason this is occuring and how do I keep my options from disappearing?
Plunker link demonstrating the issue: http://plnkr.co/edit/DolBIN
HTML
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head>
<title>Angular Test Prjoect - Home</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script type="text/javascript" src="Clinic.js"></script>
</head>
<body>
<div ng-controller="ClinicCtrl">
<select ng-options="item as item.start + '-' + item.end + ':' + item.patient.name for item in appointments" ng-model="appointments">
</select>
</div>
</body>
</html>
JavaScript
function ClinicCtrl($scope) {
$scope.appointments = [
{ start: "900", end: "930", provider: "1", patient: {name:"Allen",dob:"8/12/1977"} },
{ start: "1000", end: "1045", provider: "1", patient: { name: "Allen", dob: "8/12/1971"} },
{ start: "1030", end: "1100", provider: "2", patient: { name: "David", dob: "11/22/1973"} },
{ start: "1100", end: "1145", provider: "2", patient: { name: "Francine", dob: "3/18/1987"} },
{ start: "1230", end: "1530", provider: "3", patient: { name: "George", dob: "4/5/1997"} },
{ start: "1300", end: "1500", provider: "3", patient: { name: "Kirkman", dob: "6/28/1970"} }
];
}
884
1 Answer. The reason why AngularJS include an empty option in select is that it is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options.
The select directive is used together with ngModel to provide data-binding between the scope and the <select> control (including setting default values). It also handles dynamic <option> elements, which can be added using the ngRepeat or ngOptions directives.
AngularJS ng-selected Directive The ng-selected directive sets the selected attribute of an <option> element in a <select> list. The option will be selected if the expression inside the ng-selected attribute returns true. The ng-selected directive is necessary to be able to shift the value between true and false .
The problem is that the ng-model on your select element overwrites the $scope.appointments array as soon as an item is selected. Use a different scope property for your ng-model value.
Here's an updated plunker: http://plnkr.co/edit/EAExby
The changes to your template would be:
<div ng-controller="ClinicCtrl"> <select ng-options="item as item.start + '-' + item.end + ':' + item.patient.name for item in appointments" ng-model="selectedAppointment" ></select> {{selectedAppointment}} <!-- log out the value just to show it's working --> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
