javascript 选择项目时，AngularJS 选择框选项消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15816400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS select box options disappear when an item is selected
提问by mccainz
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?
我使用 Angularjs 创建了一个绑定到模型的选择框。选择框选项加载正确，但只要选择任何单个选项，所有选项都会从选择框中消失。发生这种情况的原因是什么，我如何防止我的选择消失？
Plunker link demonstrating the issue: http://plnkr.co/edit/DolBIN
展示该问题的 Plunker 链接：http://plnkr.co/edit/DolBIN
HTML
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
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"} }
];
}
回答by Noah Freitas
The problem is that the ng-modelon your select element overwrites the $scope.appointmentsarray as soon as an item is selected. Use a different scope property for your ng-modelvalue.
问题是，一旦ng-model选择了$scope.appointments一个项目，您的 select 元素上的 就会覆盖数组。为您的ng-model值使用不同的范围属性。
Here's an updated plunker: http://plnkr.co/edit/EAExby
这是一个更新的 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>
