Javascript AngularJS选择框选项在选择项目时消失

我使用Angularjs创建了一个绑定到模型的选择框。 选择框选项将正确加载，但一旦选择任何单个选项，所有选项都将从选择框中消失。发生这种情况的原因是什么？我如何避免我的选择消失

Plunker链接演示了该问题：

HTML

---

问题在于，select元素上的

ng model

会在选择项目后立即覆盖

$scope.appointments

数组。为您的

ng模型

值使用不同的范围属性

以下是更新的plunker：

对模板的更改将是：

<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>

{{selectedappoints}

+1，我不知道您可以这样做：

item.start+'-'+item.end+':'+item.patient.name

选择列表标签。谢谢@Noah。。我是初学者，终于找到了你的解决办法：）谢谢！我遇到了一个类似的情况，并通过从

中删除ng模型修复了它，正如您指出的原因。真不敢相信就是这样。非常感谢你！

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"} }
    ];
}

<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>