2013-02-05 20 views
32

मैं अंगुलरजेएस के साथ काफी शुरुआत कर रहा हूं और वर्तमान में मैं Django में एक वेब एप्लिकेशन पर काम कर रहा हूं जहां मैं अग्रदूत भाग का उपयोग कर सकता हूं जो मैं कह सकता हूं। मेरी समस्या यह है कि ड्रॉपडाउन सूची जो किसी दायरे से ऑब्जेक्ट्स के साथ पॉप्युलेट की जाती है हमेशा एक खाली तत्व से शुरू होती है (यदि मैं सूची में से किसी एक को चुनता हूं, तो समस्या समाप्त हो जाती है)। इससे समस्याएं पैदा होती हैं क्योंकि यदि उपयोगकर्ता POST अनुरोध को सामान्य रूप से कुछ भी नहीं चुनता है तो यह अब और काम नहीं करेगा। मैं जानना चाहता हूं कि पूर्व निर्धारित मूल्य या कुछ समान जैसा कुछ कैसे है।ड्रॉपडाउन सूची में खाली पहला तत्व

करें टैग:

<select id="sel" class="input-block-level" ng-model="list_category"> 
      <option ng-repeat="obj in list_categories.data" value="{{obj.id}}">{{obj.name}}</option> 
      <option value="Other">Other</option> 
     </select> 

$ scope.list_categories:

var listcategoryPromise = ListCategory.get(); 
    listcategoryPromise.then(function(response) { 
     $scope.list_categories = { 
      meta : response.data.meta, 
      data : response.data.objects 
     }; 
    }); 
+0

संभावित डुप्लिकेट [कोणीय में चुनने में एक खाली विकल्प क्यों शामिल है] (http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in- चुनें) –

उत्तर

58

उपयोग के निर्देश ng-options और हटाने value 'अन्य' विकल्प से, इस तरह:

<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data">  
    <option value="">Other</option> 
</select> 

यह सुनिश्चित करता है कि अगर list_category रिक्त है (कोई प्रवेश चयनित), 'अन्य' विकल्प चुना गया है (डिफ़ॉल्ट रूप से)।

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

+0

मैंने पहले कुछ ऐसा करने की कोशिश की है और मैंने एक ही समस्या में भाग लिया है। मेरे लिए मान = "अन्य" महत्वपूर्ण है क्योंकि मैं टेक्स्ट फ़ील्ड को पॉप अप करने के लिए एनजी-शो का उपयोग करता हूं, फिर चुना जाता है: <इनपुट क्लास = "इनपुट-ब्लॉक-स्तर एनजी-वैध एनजी-गंदी" एनजी-मॉडल = " new_list_category "ng-show =" list_category == 'अन्य' "प्रकार =" पाठ "प्लेसहोल्डर =" श्रेणी का नाम "> – MariusNV

+2

यह कोई समस्या नहीं है। 'Ng-show' को 'ng-show =" में बदलें! List_category "' (केवल इनपुट दिखाएं यदि कोई' list_category' चयनित नहीं है) fiddle: http://jsfiddle.net/bmleite/gkJve/2/ – bmleite

5

नीचे काम कर रहे उदाहरण नीचे आप विकल्पों के साथ एनजी-दोहराने से बचना चाहिए पता लगाएं तो कृपया देखें यहाँ मेरी कोड का हिस्सा है

<body ng-controller="testcontroller"> 
     <select ng-model="item" ng-options="item.ID as item.Title for item in items"> 
     </select> 
      <span>{{item}}</span> 
    </body> 

App.controller('testcontroller', function ($scope) { 
    $scope.item = '000001'; 
    $scope.items = [ 
     { ID: '000001', Title: 'Chicago' }, 
     { ID: '000002', Title: 'New York' }, 
     { ID: '000003', Title: 'Washington' } 
    ]; 
}); 
3

के साथ नमूना कोड के नीचे आपके लिए एक विशिष्ट वाक्यविन्यास का उपयोग कर सकते हैं Angularjs के साथटैग।

documentation page से प्रेरित होकर:

<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.name for obj in list_categories.data"> 
    <option value="Other">Other</option> 
</select> 
2

यहाँ कुछ कोड का चयन सूचियों के बारे में AngularJs.org वेबसाइट से सीधे है:,

<select ng-model="color" ng-options="c.name for c in colors"></select> 

पहले जैसा कि आप देख सकते हैं, आप की जरूरत नहीं है अपनी विकल्प सूची बनाने के लिए ng-repeat का उपयोग करें। कोणीय आपको मूल रूप से foreach लूप को अपनी विकल्प सूची बनाने के लिए संग्रह पर जाने देगा। दूसरा, आपके पास एनजी-मॉडल है जो कि चयन पर है, लेकिन यह आपके संग्रह के नाम के समान नहीं है। यह आपकी वस्तु होगी जो वास्तव में पोस्ट समय पर एकत्र की जाती है।

function MyCntrl($scope) { 
    $scope.colors = [ 
     {name:'black', shade:'dark'}, 
     {name:'white', shade:'light'}, 
     {name:'red', shade:'dark'}, 
     {name:'blue', shade:'dark'}, 
     {name:'yellow', shade:'light'} 
    ]; 
    $scope.color = $scope.colors[2]; // red 
} 

ठीक है, और यहां जावास्क्रिप्ट नियंत्रक कोड है। $scope.colors संग्रह है और $scope.color मॉडल संपत्ति है जो HTML में चयन सूची को सौंपा गया है। जैसा कि आप इस उदाहरण से देख सकते हैं मॉडल मॉडल को सरणी में तीसरे विकल्प का डिफ़ॉल्ट प्रारंभिक मान दिया जा रहा है। आपके लिए, यह http.get से सेट किया जा सकता है जिसका उपयोग आप अपने पृष्ठ को अंततः लोड करने के लिए कर रहे हैं।

अब जब आप foreach कर रहे हैं, तो आप मूल रूप से संग्रह से 'नाम' मान को पकड़ रहे हैं और आप ड्रॉपडाउन में 'यह मान दिखाएं' कह रहे हैं और पोस्ट पर इस मान का उपयोग करें। उस आंतरिक मॉडल प्रॉपर्टी सेट को लेकर, आप अपनी ड्रॉप डाउन सूची में खाली विकल्प फ़ील्ड रखने से बचने में सक्षम होना चाहिए।

संदर्भ: AngularJS Select

0

बूंद के शीर्ष पर खाली खाली विकल्प नीचे दिखाई देगा, यदि आप कुछ के साथ ng-model निर्धारित किया है मान जो ng-Repeat के बाद बनाए गए सूची विकल्पों में शामिल नहीं है। अब अगर आप मूल पोस्ट पर विचार करने और ng-model में ng-model हटाने या कुछ वैध मान सेट, यह ठीक काम करेंगे या आप के रूप में

$scope.list_category = $scope.list_categories.data[0].id; 
-1

पहले आइटम का चयन किया सेट कर सकते हैं इस प्रयास करें:

<option style="display: none" value=""></option> 

उम्मीद है कि यह

+0

कृपया इसके साथ संपादित करें अधिक जानकारी। केवल कोड और "इसे आज़माएं" उत्तर निराश हैं, क्योंकि उनमें कोई खोज योग्य सामग्री नहीं है, और यह समझाएं कि किसी को "इसे आजमाएं" क्यों चाहिए। हम ज्ञान के लिए संसाधन बनने के लिए यहां एक प्रयास करते हैं। – abarisone

+0

अपने कोड में इनलाइन शैलियों को न लिखें, यह एक खराब अभ्यास है, जब तक कि आप इसे जेएस के माध्यम से गतिशील रूप से नहीं जोड़ते, तब भी, यह एक खराब अभ्यास है। बस <विकल्प मूल्य = ""> {{item}} जोड़ना पर्याप्त होगा। – TGarrett

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