2013-04-04 8 views
22

मैंने Angularjs का उपयोग करके मॉडल के लिए एक चुनिंदा बॉक्स बनाया है। चयन बॉक्स विकल्प सही ढंग से लोड होते हैं लेकिन जैसे ही कोई भी विकल्प चुनते हैं, सभी विकल्प चुनिंदा बॉक्स से गायब हो जाते हैं। यह क्या कारण है और मैं अपने विकल्पों को गायब होने से कैसे रोकूं?AngularJS चुनिंदा बॉक्स विकल्प गायब हो जाते हैं जब कोई आइटम चुना जाता है

Plunker लिंक मुद्दे का प्रदर्शन: http://plnkr.co/edit/DolBIN

एचटीएमएल

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

जावास्क्रिप्ट

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

+1, मैं तुम्हें कुछ इस तरह कर सकता है पता नहीं था: 'item.start + '- चयन सूची लेबल के लिए 'item.end +': 'item.patient.name'। –

उत्तर

44

समस्या यह है कि अपने चयन तत्व पर 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> 
+1

धन्यवाद @ नोहा .. मैं शुरुआत में हूं, अंततः आपका समाधान मिला :) – AnNaMaLaI

+0

धन्यवाद! मैंने इसी तरह की स्थिति से मुलाकात की और एनजी-मॉडल को '' से हटाकर इसे ठीक किया क्योंकि आपने कारण बताया था। –

+0

विश्वास नहीं कर सकता कि यह था। आपको बहुत - बहुत धन्यवाद! – cgf

संबंधित मुद्दे