2013-02-07 11 views
7

के भीतर ड्रॉपडाउन के लिए एनजी-मॉडल का उपयोग करना मुझे एनजी-दोहराना के भीतर एनजी-मॉडल का उपयोग करने का तरीका समझने में कठिनाई हो रही है। इस संदर्भ में, कार्गोइटम उन वस्तुओं की एक सूची है जिन पर लोडपॉइंट है। लोडपॉइंट में आईडी और टेक्स्ट गुण हैं।Angular.js: ng-repeat

मैं ड्रॉपडाउन में वर्तमान चयन से जुड़ा पाठ दिखाना चाहता हूं, लेकिन मैं यह भी ट्रैक करना चाहता हूं कि कौन सा आईडी चुना गया है। इसलिए मुझे यकीन नहीं है कि चुनिंदा बाइंडिंग के साथ दोनों गुणों को अपडेट करना है, या तो टैग के स्पष्ट उपयोग के माध्यम से, या एनजी-विकल्प का उपयोग करना जिन्हें मैंने वास्तव में अभी तक नहीं समझा है।

तो दो सवाल:

1) मैं कैसे ठीक से मेरी CargoItem.LoadPoint पर ईद और पाठ गुण के लिए चयन सूची से दोनों पाठ और मूल्य के लिए बाध्य करते हैं? मुझे लगता है कि मेरा एनजी मॉडल गलत हो सकता है?

2) मैं चयनित मूल्य पर डिफ़ॉल्ट रूप से एनजी-विकल्प का उपयोग कैसे करूं? मैंने इसे अपना खुद का विकल्प टैग लिखने के बारे में सोचा, लेकिन यदि संभव हो तो मैं एनजी-विकल्प का उपयोग करना चाहता हूं।

<div ng-repeat="cargoItem in cargo.CargoItems"> 
    <span>Selected Load Point: {{cargo.LoadPoint.Text}}</span> 
    <select ng-model="cargoItem.LoadPoint" ng-options="loadPoint.Id as loadPoint.Text for loadPoint in LoadPoints"></select> 
</div> 

अग्रिम धन्यवाद!

उत्तर

13
  1. 'आईडी' संपत्ति (loadPoint.Id) का उपयोग करने के बजाय पूरे ऑब्जेक्ट संदर्भ से जुड़ें। ऐसा करने के लिए, बस ng-options बदल सकते हैं और loadPoint.Id as हिस्से को हटाने:

    <select ng-model="cargoItem.LoadPoint" ng-options="loadPoint.Text for loadPoint in LoadPoints"></select> 
    
  2. आप ऊपर दृष्टिकोण और सही संदर्भ को LoadPoints वस्तु का उपयोग करते हैं, कोणीय आप के लिए स्वचालित रूप से ऐसा कर सकते हैं।

    $scope.LoadPoints = [{ Id: '1', Text: 'loadPointA' },{ Id: '2', Text: 'loadPointB' }];   
    $scope.cargo = { 
        CargoItems: [{ 
         LoadPoint: $scope.LoadPoints[0] 
        }, { 
         LoadPoint: $scope.LoadPoints[1] 
        }] 
    }; 
    

    इस दृष्टिकोण, cargoItem.LoadPoint (ngModel) का उपयोग करना हमेशा एक संदर्भ पकड़ करने के लिए पूरे LoadPoints वस्तु (यानी { Id: '1', Text: 'loadPointA' }) होगा, और न केवल अपने आईडी (यहां तरीका देखें: एक सीधा LoadPoints का उपयोग करने पर एक उदाहरण संदर्भ वस्तु की यानी '1')।

jsFiddle: http://jsfiddle.net/bmleite/baRb5/

+0

बिल्कुल सही, बहुत बहुत धन्यवाद! – Sounten

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