當選擇一個項目時，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選擇框選項消失

回答

相關問題