当选择一个项目时，AngularJS选择框选项消失

我创建了一个使用Angularjs绑定到模型的选择框。选择框选项正确加载，但只要选择任何单个选项，所有选项都会从选择框中消失。这是什么原因发生，我如何让我的选择消失？当选择一个项目时，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"} } 
    ]; 
}

来源

2013-04-04 mccainz

+1，我不知道你会做这样的事情：'item.start +“ - '+ item.end +'：'+ item.patient.name'为选择列表标签。 – 2013-04-04 17:40:14

的问题是，你选择的元素上ng-model尽快覆盖$scope.appointments数组作为项目被选中。为您的ng-model值使用不同的作用域属性。

这里有一个更新的plunker：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>

来源

2013-04-04 16:24:24

谢谢@Noah ..我是初学者最终找到你的解决方案:) – AnNaMaLaI 2014-03-30 17:11:57

谢谢！我遇到了类似的情况，并通过从“”中删除ng模型来解决问题，因为您指出了原因。 – 2014-08-21 10:22:03

简直不敢相信。非常感谢！ – cgf 2015-01-22 22:17:28

当选择一个项目时，AngularJS选择框选项消失

回答

相关问题