选择项目时，AngularJS选择框选项消失答案

【问题标题】：AngularJS select box options disappear when an item is selected选择项目时，AngularJS选择框选项消失
【发布时间】：2013-03-26 20:00:48
【问题描述】：

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

Plunker 链接演示了该问题： 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"} }
    ];
}

【问题讨论】：

+1，我不知道你可以这样做：item.start + '-' + item.end + ':' + item.patient.name 用于选择列表标签。

标签： javascript angularjs

【解决方案1】：

问题是选择元素上的ng-model 会在选择项目后立即覆盖$scope.appointments 数组。为您的 ng-model 值使用不同的范围属性。

这是一个更新的插件：http://plnkr.co/edit/EAExby

对您的模板的更改是：

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

【讨论】：

谢谢@Noah .. 我是初学者最终找到了你的解决方案:)
谢谢！正如您指出的原因，我遇到了类似的情况并通过从 <input /> 中删除 ng-model 来修复它。
不敢相信就是这样。非常感谢！