AngularJS में चयन में एक खाली विकल्प क्यों शामिल है?

Question

मैं पिछले कुछ हफ्तों से AngularJS के साथ काम कर रहा हूं, और एक बात जो मुझे बहुत परेशान कर रही है, वह यह है कि http://docs.angularjs.org/api/ng विनिर्देश में परिभाषित सभी क्रमपरिवर्तन या कॉन्फ़िगरेशन की कोशिश करने के बाद भी .directive: सेलेक्ट करें , मुझे अभी भी सिलेक्ट एलिमेंट के पहले बच्चे के रूप में एक खाली विकल्प मिलता है।

यहाँ जेड है:

select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');

यहाँ नियंत्रक:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' },
    { name: 'Bug', value: 'bug' },
    { name: 'Enhancement', value: 'enhancement' }
];

अंत में, यहाँ HTML जो उत्पन्न होता है:

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

इससे छुटकारा पाने के लिए मुझे क्या करने की आवश्यकता है?

पुनश्च: चीजें इसके बिना भी काम करती हैं, लेकिन यदि आप कई चयनों के बिना चयन 2 का उपयोग करते हैं तो यह अजीब लगता है।

Answer 1

खाली optionतब जनरेट किया जाता है जब द्वारा ng-modelनिर्दिष्ट विकल्पों के एक सेट में मौजूद कोई मान मौजूद नहीं होता है ng-options। यह आकस्मिक मॉडल चयन को रोकने के लिए होता है: एंगुलरजेएस यह देख सकता है कि प्रारंभिक मॉडल या तो अपरिभाषित है या विकल्पों के सेट में नहीं है और अपने दम पर मॉडल मूल्य तय नहीं करना चाहते हैं।

यदि आप खाली विकल्प से छुटकारा पाना चाहते हैं, तो अपने नियंत्रक में एक प्रारंभिक मूल्य चुनें, कुछ इस प्रकार है:

$scope.form.type = $scope.typeOptions[0].value;

यहाँ है jsFiddle: http://jsfiddle.net/MTfRD/3/

संक्षेप में: खाली विकल्प का मतलब है कि कोई वैध मॉडल नहीं चुना गया है (वैध से मेरा मतलब है: विकल्पों के सेट से)। इस खाली विकल्प से छुटकारा पाने के लिए आपको एक वैध मॉडल मूल्य का चयन करने की आवश्यकता है।

Comments

मैंने दोनों $ गुंजाइश के साथ कोशिश की ।form.type = ''; और $ गुंजाइश.form.type = $ गुंजाइश.typeOptions [0], हालांकि मैंने अभी भी इसे देखा है - <विकल्प मूल्य = "?" चयनित = "चयनित"> </ विकल्प>

— सुधांशु

कभी-कभी JS में यह डेटा होने का कोई मतलब नहीं है। यदि यह वह सर्वर है जिसने उस चयन में क्या निर्णय लिया था, तो JS को इसे डुप्लिकेट क्यों करना चाहिए?

— हेनरीविल

यदि आप किसी सरणी का उपयोग कर रहे हैं और nullयह आपके मानों में से एक है, तो दुर्भाग्य से यह काम नहीं करता है ।

— vpiTriumph

क्या खाली के अंदर एक पाठ जोड़ना संभव है <option>इसलिए टैट कोणीय कुछ उत्पन्न करता है<option value="?">Select an option</option>

— RPDeshaies

@ Tareck117 ने विकल्प सूची <option value="">Select an option</option>के अशक्त मूल्य को मिटा दिया। के लिए कोई ज़रूरत नहीं है?

— सेबस्टियन

Answer 2

यदि आप एक प्रारंभिक मूल्य चाहते हैं, तो @ pkozlowski.opensource का उत्तर देखें, जिसे FYI को एनजी-इनिट का उपयोग करके दृश्य (नियंत्रक के बजाय) में लागू किया जा सकता है:

<select ng-model="form.type" required="required" ng-init="form.type='bug'"
  ng-options="option.value as option.name for option in typeOptions" >
</select>

यदि आप एक प्रारंभिक मूल्य नहीं चाहते हैं, "एक एकल हार्ड-कोडित तत्व, एक रिक्त स्ट्रिंग के लिए निर्धारित मूल्य के साथ, तत्व में निहित हो सकता है। यह तत्व तब शून्य या" चयनित नहीं "विकल्प का प्रतिनिधित्व करेगा:"

<select ng-model="form.type" required="required"
  ng-options="option.value as option.name for option in typeOptions" >
    <option style="display:none" value="">select a type</option>
</select>

Comments

@ ह्यूगो, वर्किंग फिडेल: jsfiddle.net/4qKyx/1 ध्यान दें कि "एक प्रकार का चयन करें" दिखाया गया है, लेकिन इसके साथ कोई मूल्य जुड़ा नहीं है। और एक बार जब आप कुछ और चुनते हैं, तो आप इसे दोबारा नहीं देखेंगे। (क्रोम पर टेस्ट।)

— मार्क राजकॉक

@MarkRajcok - उत्कृष्ट सुझाव! मैंने निर्देशन के साथ आपके उदाहरण का उपयोग करते हुए एक और मुद्दे पर ठोकर खाई है। क्या आप कृपया देख सकते हैं? plnkr.co/edit/efaZdEQlNfoDihk1R1zc?p=preview

— Jan-Terje Sørensen

इसके साथ समस्या यह है कि आप अभी भी कीबोर्ड के साथ चयन कर सकते हैं, देखें stackoverflow.com/a/8442831/57344 समाधान

— हैवेगस

यह अब के लिए काम कर सकते हैं, लेकिन कोणीय प्रलेखन विशेष रूप से एनजी-दोहराने के अलावा कुछ भी के लिए एनजी-init का उपयोग कर के खिलाफ सिफारिश की गई है - देखना docs.angularjs.org/api/ng/directive/ngInit

— एड नॉरिस

IE10 में काम नहीं करता है, "एक प्रकार का चयन करें" हमेशा दिखाई और चयन करने योग्य होता है।

— रॉबिन

Answer 3

कोणीय <1.4

किसी भी व्यक्ति के लिए जो विकल्पों में से किसी एक के लिए वैध मान के रूप में "अशक्त" व्यवहार करता है (इसलिए कल्पना करें कि "नल" नीचे दिए गए उदाहरणों में किसी एक आइटम का मूल्य है ), मुझे यह सुनिश्चित करने का सबसे सरल तरीका मिला कि स्वचालित रूप से जोड़ा गया विकल्प छिपा हुआ है, एनजी-इफ का उपयोग करना है।

<select ng-options="option.value as option.name for option in typeOptions">
    <option value="" ng-if="false"></option>
</select>

एनजी-अगर और एनजी-हाईड क्यों नहीं? क्योंकि आप चाहते हैं कि सीएसएस सेलेक्टर्स जो ऊपर के अंदर पहले विकल्प को लक्षित करें, "असली" विकल्प को लक्षित करें, न कि छिपे हुए को। यह तब उपयोगी हो जाता है जब आप e2e टेस्टिंग के लिए प्रोट्रैक्टर का उपयोग कर रहे हों और (जो भी कारण से) आप चुनिंदा विकल्पों को लक्षित करने के लिए by.css () का उपयोग करते हैं।

कोणीय> = 1.4

चयनात्मक और विकल्प निर्देशों के फिर से सक्रिय होने के कारण, उपयोग ng-ifकरना अब एक व्यवहार्य विकल्प नहीं है, इसलिए आप ng-show="false"फिर से काम करने के लिए बारी बारी से मिलेंगे।

Comments

स्वीकृत उत्तर होना चाहिए, क्योंकि यह चयन के लिए सही दृश्य व्यवहार है। आप size="5"चयन विशेषताएँ डालते हैं और आप देख सकते हैं कि कुछ भी चयनित नहीं है! जैसे डिफॉल्ट में <select>-आधार! मुझे समझ में नहीं आ रहा है कि कोणीय बिना multipleविशेषता के चयन के लिए ऐसा क्यों कर रहा है ...

— सेबस्टियन

हां मैं सहमत हूं, यह स्वीकृत उत्तर होना चाहिए। यह 'कोणीय-मार्ग' है। एनजी-अगर वास्तव में डोम से विकल्प तत्व को हटा देता है (जब असत्य होता है) तो यह समाधान बिना 'हैक' कोडिंग (एनजी-छिपाने या एनजी-शो के विपरीत) के सभी ब्राउज़रों पर भी काम करता है।

— Sander_P

@Sander_P इस समाधान की परिभाषा में मेरी राय में "हैकी" कोडिंग है (इसे बाहर ले जाने के लिए ट्रिक कोणीय में कुछ डालकर), लेकिन आप सही हैं कि यह अभी भी "सर्वश्रेष्ठ" समाधान है। "इससे भी बेहतर" समाधान एक ऐसे फ्रिज के चयन के लिए होगा जिसका कोई मूल्य नहीं है! क्या बिल्ली है? इसकी तरह यह एक किनारे परिदृश्य नहीं है।

— दुवेवाद

@ डीडवाड: चीजें कोणीय 1.4 के साथ बेहतर हो सकती हैं। 1.4.0 के लिए AngularJS ब्लॉग से: "कष्टप्रद बग्स को कई कष्टप्रद बगों को ठीक करने की अनुमति देने के लिए पूरी तरह से प्रतिबिंबित किया गया था,"

— सैंडर_पी

Haha "कष्टप्रद कीड़े"। ठीक है। वैसे मैं अभी भी थोड़ा स्किदिश हूँ जब यह प्रसव से 3 दिन पहले अपग्रेड करने की बात आती है, तो मैं अभी के लिए आपके समाधान के साथ रहूँगा, जो लगता है कि तैर रहा है। भविष्य के लिए प्रसिद्ध है, हालांकि :) धन्यवाद!

— दुवेवाद

Answer 4

शायद किसी के लिए उपयोगी:

यदि आप एनजी विकल्पों के बजाय सादे विकल्पों का उपयोग करना चाहते हैं, तो आप नीचे की तरह कर सकते हैं:

<select ng-model="sortorder" ng-init="sortorder='publish_date'">
  <option value="publish_date">Ascending</option>
  <option value="-publish_date">Descending</option>
</select>

मॉडल इनलाइन सेट करें। खाली विकल्प से छुटकारा पाने के लिए एनजी-इनिट का उपयोग करें

Comments

मुझे JSON सरणियों के बजाय OBJECTS के साथ एनजी-विकल्प स्थापित करने का एक स्पष्ट उदाहरण नहीं मिल पाया है और जब मैं दोनों के बीच "अनुवाद" करने की कोशिश करता हूं, तो न केवल यह सही नहीं निकलता है, लेकिन यह "चुपचाप" विफल रहता है मुझे कोई सुराग नहीं है कि मैं क्या गलत कर रहा हूं। मैंने आखिरकार ऑप्शन टैग में प्लेन एनजी-रिपीट का विकल्प चुना। मुझे पता है कि यह सबसे अच्छा अभ्यास नहीं है, लेकिन कम से कम यह काम करता है। यदि कोई मुझे सीधे, आसानी से विवरण पर स्वैग में बता सकता है, तो डेटा ऑब्जेक्ट्स (नहीं JSON) के साथ एनजी विकल्पों का उपयोग करके कोणीय-एन -00 बी-फ्रेंडली वर्किंग उदाहरण, मैं अभ्यस्त हो जाऊंगा। अगर यह एनजी-इनिट का भी उपयोग करता है तो डबल एल्टेड।

— कोड-सुशी

मैं सादे विकल्पों का उपयोग कर रहा हूं, लेकिन नियंत्रक में मुझे चयनित ड्रॉपडाउन का मूल्य नहीं लगता है। Ex: मैंने सतर्कता बरतने की कोशिश की ($ गुंजाइश.सोर्टऑर्डर.वेल्यू); और सचेत ($ गुंजाइश.स्मार्टर); दोनों अपरिभाषित देता है। यहां चयनित मूल्य कैसे प्राप्त करें?

— मैवरिक रिज़

इस के लिए बहुत बहुत धन्यवाद। मैं नियंत्रक में एक पूरी तरह से बेकार वस्तु लिखने वाला था जिसकी मुझे आवश्यकता नहीं थी मुझे बस एक सरल चयन की आवश्यकता थी .. एक बार फिर धन्यवाद।

— मुहम्मद बिन युसरत

Answer 5

ऐसा ही कुछ मेरे साथ भी हो रहा था और कोणीय 1.5 में अपग्रेड के कारण हुआ था। कोणीय के नए संस्करणों में टाइप केng-init लिए पार्स किया जा रहा है । पुराने में कोणीय मान "600" के विकल्प के लिए मैप करेगा, लेकिन कोणीय 1.5 में यह नहीं मिलेगा क्योंकि यह मूल्य 600 के साथ विकल्प खोजने की उम्मीद कर रहा है । कोणीय तो एक यादृच्छिक पहला आइटम सम्मिलित करेगा:ng-init="myModelName=600"<option value="600">First</option><option value=600>First</option>

<option value="? number:600 ?"></option>

कोणीय <1.2.x

<select ng-model="myModelName" ng-init="myModelName=600">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

कोणीय> 1.2

<select ng-model="myModelName" ng-init="myModelName='600'">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Comments

धन्यवाद! मेरे मामले में मैं एनजी-इनिट (कोई डिफ़ॉल्ट मान नहीं) का उपयोग नहीं कर सकता, इसलिए मैंने अपने मॉडल को एक स्ट्रिंग में डाला और यह काम कर गया!

— रॉड्रिगो ग्रेका

मेरे आवेदन उत्पादन मुद्दे के लिए बहुत उपयोगी है। धन्यवाद @Nabil Boag

— Venki

यह काम करता है, यकीन है कि, लेकिन बेहतर विकल्प का उपयोग करने के लिए है ng-value="600"में optionके बजाय value। यह इसे एक नंबर पर ले जाएगा और आपको अपने मूल्यों को बदलने की ज़रूरत नहीं है जैसे आप अभी करते हैं :)

— अधिकतम

@ मोम मैंने बहुत सारे उच्च मूल्य के जवाबों की कोशिश की, लेकिन जब तक मैंने तुम्हारा नहीं पाया तब तक कोई काम नहीं किया। धन्यवाद।

— एंड्रयू

Answer 6

यहाँ जवाबों की बहुरूपियों के बीच, मुझे लगा कि मैं उस समाधान को फिर से तैयार करूंगा जो मेरे लिए काम करता है और निम्नलिखित सभी स्थितियों को पूरा करता है:

• एक प्लेसहोल्डर / प्रॉम्प्ट प्रदान किया जब एनजी-मॉडल गलत है (जैसे "- क्षेत्र चुनें--" डब्ल्यू value="") ।
• जब एनजी-मॉडल का मूल्य गलत होता है और उपयोगकर्ता विकल्प ड्रॉपडाउन खोलता है, तो प्लेसहोल्डर का चयन किया जाता है (यहां उल्लिखित अन्य समाधान पहला विकल्प चुनते हैं जो भ्रामक हो सकता है)
• उपयोगकर्ता को एक वैध मूल्य को रद्द करने की अनुमति दें, अनिवार्य रूप से फिर से गलत / डिफ़ॉल्ट मान का चयन करें

कोड

<select name="market_vertical" ng-model="vc.viewData.market_vertical"
    ng-options="opt as (opt | capitalizeFirst) for opt in vc.adminData.regions">

    <option ng-selected="true" value="">select a market vertical</option>
</select>

src

मूल q & a - https://stackoverflow.com/a/32880941/1121919

Comments

क्या आपका मतलब डिफ़ॉल्ट है <option ng-selected="true" value="null">?

— जुस्कोई

मेरा मतलब है कि अगर एनजी-मॉडल मूल्य शून्य के रूप में तय किया गया है, तो कोणीय और चयन पर खाली विकल्प

— फ्लेज़कैनो

Answer 7

एक त्वरित समाधान:

select option:empty { display:none }

आशा है कि यह किसी की मदद करता है। आदर्श रूप से, चयनित उत्तर दृष्टिकोण होना चाहिए लेकिन यदि ऐसा संभव नहीं है तो पैच के रूप में काम करना चाहिए।

Comments

मेरे परीक्षण के अनुसार यह केवल क्रोम (नए क्रोम, उस के ऊपर) और फ़ायरफ़ॉक्स में काम करेगा। IE और सफारी तोड़। ओपेरा और अन्य एज ब्राउज़र के बारे में नहीं जानते। किसी भी तरह से, यह एक अच्छा समाधान नहीं है, दुर्भाग्य से।

— दुवेवाद

हमें HTML में <select> या फिर js के बंद होने से पहले कहां रखना चाहिए

— H Varma

@HVarma यह एक सीएसएस नियम है। इसे स्टाइलशीट में या <style> टैग

— KK

@KK stackoverflow.com/questions/48355599/… क्या आप इसकी जाँच कर सकते हैं?

— सुदर्शन कालेबेरे

Answer 8

हां एनजी-मॉडल खाली विकल्प मान पैदा करेगा, जब एनजी-मॉडल संपत्ति अपरिभाषित होती है। यदि हम एनजी-मॉडल पर ऑब्जेक्ट असाइन करते हैं, तो हम इससे बच सकते हैं

उदाहरण

कोणीय कोडिंग

$scope.collections = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement'}
];

$scope.selectedOption = $scope.collections[0];


<select class='form-control' data-ng-model='selectedOption' data-ng-options='item as item.name for item in collections'></select>

महत्वपूर्ण लेख:

$ गुंजाइश की तरह ऑब्जेक्ट का असाइन करें। कैलक्लेशन्स [0] या $ स्कोप। कैलक्शंस [1] से एनजी-मॉडल, ऑब्जेक्ट ऑब्जेक्ट का उपयोग न करें। यदि आपको कॉल बैक फ़ंक्शन का उपयोग करके सर्वर से चयन विकल्प मान मिल रहा है, तो एनजी-मॉडल पर ऑब्जेक्ट असाइन करें

कोणीय दस्तावेज़ से नोट करें

नोट: ngModel संदर्भ द्वारा तुलना करता है, मूल्य नहीं। वस्तुओं की एक सरणी के लिए बाध्य करते समय यह महत्वपूर्ण है। एक उदाहरण देखें http://jsfiddle.net/qWzTb/

मैंने बहुत बार कोशिश की आखिरकार मुझे मिल गया।

Answer 9

हालांकि दोनों @ pkozlowski.opensource's और @ Mark के उत्तर सही हैं, मैं अपना थोड़ा संशोधित संस्करण साझा करना चाहूंगा, जहां मैं हमेशा सूची में पहले आइटम का चयन करता हूं, चाहे उसका मूल्य कुछ भी हो:

<select ng-options="option.value as option.name for option in typeOptions" ng-init="form.type=typeOptions[0].value">
</select>

Answer 10

मैं कोणीय 1.4x का उपयोग कर रहा हूं और मुझे यह उदाहरण मिला, इसलिए मैंने एनजी-इनिट का उपयोग चयन में प्रारंभिक मूल्य निर्धारित करने के लिए किया:

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.id for item in items"></select>

Answer 11

मैंने उसी मुद्दे का सामना किया। यदि आप सामान्य पोस्ट के साथ कोणीय रूप में पोस्ट कर रहे हैं तो आप इस मुद्दे का सामना करेंगे, क्योंकि कोणीय आपको उन विकल्पों के लिए मान सेट करने की अनुमति नहीं देता है जिस तरह से आपने उपयोग किया है। यदि आपको "form.type" का मान मिलता है, तो आपको सही मान मिलेगा। आपको कोणीय ऑब्जेक्ट को पोस्ट करना होगा यह स्वयं नहीं है फॉर्म पोस्ट।

Answer 12

एक साधारण समाधान एक रिक्त मान के साथ एक विकल्प सेट करना है ""मैंने पाया कि यह अतिरिक्त अपरिभाषित विकल्प को समाप्त करता है।

Comments

Doenst काम @ 1.4.3, यह सिर्फ फॉर्म में 2 खाली विकल्प जोड़ता है

— डेनी म्यूलर

Answer 13

ठीक है, वास्तव में इसका उत्तर सरल है: जब एक विकल्प कोणीय द्वारा मान्यता प्राप्त नहीं है, तो यह एक नीरस शामिल है। आप जो गलत कर रहे हैं, जब आप एनजी विकल्पों का उपयोग करते हैं, तो यह एक ऑब्जेक्ट को पढ़ता है, कहते हैं[{ id: 10, name: test }, { id: 11, name: test2 }] right?

यह वह है जो आपके मॉडल मूल्य को समान के रूप में मूल्यांकन करने की आवश्यकता है, कहते हैं कि आप चयनित मूल्य 10 होना चाहते हैं, आपको अपने मॉडल को { id: 10, name: test }10 जैसे मूल्य का चयन करने की आवश्यकता है, इसलिए यह उस कचरे को नहीं बनाएगा।

आशा है कि यह हर किसी को समझने में मदद करता है, मैं कोशिश कर रहा था एक मोटा समय :)

Answer 14

यह समाधान मेरे लिए काम करता है:

<select ng-model="mymodel">    
   <option ng-value="''" style="display:none;" selected>Country</option>
   <option value="US">USA</option>
</select>

Comments

डाउनवोट हो सकता है क्योंकि सीएसएस को विकल्प तत्वों पर लागू करना सभी ब्राउज़रों में काम नहीं करता है।

— काफोसो

मैंने सिर्फ क्रोम, फायरफॉक्स, सफारी और एज पर इसका परीक्षण किया - सब कुछ काम कर रहा है।

— एमएमएम

@MMM "सभी ब्राउज़र" में IE शामिल है। बहुत सारे उपयोगकर्ता अभी भी IE 10 और 11 के साथ फंसे हुए हैं, और इसीलिए संभावना है कि डाउनवोट हुआ। Chrome, fF, Saf और Edge "सभी ब्राउज़र" नहीं हैं।

— PKD

Answer 15

इसने मेरे लिए काम किया

<select ng-init="basicProfile.casteId" ng-model="basicProfile.casteId" class="form-control">
     <option value="0">Select Caste....</option>
     <option data-ng-repeat="option in formCastes" value="{{option.id}}">{{option.casteName}}</option>
 </select>

Comments

बस सूची में विकल्प जोड़ता है और खाली स्थान छोड़ देता है, दुख की बात है।

— AMontpetit

Answer 16

यह पूरी तरह से ठीक काम करता है

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value=""></option>
</select>

जिस तरह से यह काम करता है, वह यह है कि यह कुछ चुनने से पहले प्रदर्शित होने का पहला विकल्प देता है और display:noneइसे हटा देता है ताकि आप चाहें तो ऐसा कर सकते हैं

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value="">select an option...</option>
</select>

और यह आपको select and optionचयन करने से पहले देगा लेकिन एक बार चयनित होने के बाद यह गायब हो जाएगा, और यह ड्रॉपडाउन में दिखाई नहीं देगा।

Comments

वास्तव में आप इस सवाल का जवाब नहीं देते हैं, इससे भी बदतर, आप सिर्फ तत्व को छिपा रहे हैं।

— मार्को

Answer 17

इसी क्रम में अपने कंट्रोलर से एक कोशिश करें:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
];
$scope.form.type = $scope.typeOptions[0];

Comments

मैंने आपके तरीके की कोशिश की लेकिन दुर्भाग्य से मैं इसे काम नहीं कर पाया। क्या आप इस बेला पर एक नज़र डाल सकते हैं। jsfiddle.net/5PdaX

— अनिकेत सिन्हा

Answer 18

यहाँ तय है:

जैसे एक नमूना डेटा के लिए:

financeRef.pageCount = [{listCount:10,listName:modelStrings.COMMON_TEN_PAGE},    
{listCount:25,listName:modelStrings.COMMON_TWENTYFIVE_PAGE},
{listCount:50,listName:modelStrings.COMMON_FIFTY_PAGE}];

चयन विकल्प इस तरह होना चाहिए: -

<select ng-model="financeRef.financeLimit" ng-change="financeRef.updateRecords(1)" 
class="perPageCount" ng-show="financeRef.showTable" ng-init="financeRef.financeLimit=10"
ng-options="value.listCount as value.listName for  value in financeRef.pageCount"
></select>

बिंदु जब हम लिखने जा रहा है value.listCountके रूप में value.listName, यह स्वचालित रूप में पाठ भरता है value.listNameलेकिन चयनित विकल्प के मूल्य हैvalue.listCount , हालांकि मूल्यों सामान्य 0,1,2 .. और इतने पर को मेरे !!!

मेरे मामले में, financeRef.financeLimitवास्तव में हथियाने है value.listCountऔर मैं नियंत्रक में अपना हेरफेर गतिशील रूप से कर सकता हूं।

Answer 19

मैं यह जोड़ना चाहूंगा कि यदि प्रारंभिक मूल्य कुछ मूल तत्व या 1.5 घटक से एक बंधन से आता है, तो सुनिश्चित करें कि उचित प्रकार पारित हो गया है। यदि उपयोग कर रहे हैं@ बंधन में किया जाता है, तो पारित चर कठोर होगा और यदि विकल्प उदा। पूर्णांक तब खाली विकल्प दिखाई देगा।

या तो init में सही तरीके से पार्स, या <नहीं के साथ बाध्यकारी और नहीं @(जब तक आवश्यक नहीं प्रदर्शन के लिए अनुशंसित)।

Answer 20

सरल उपाय

<select ng-model='form.type' required><options>
<option ng-repeat="tp in typeOptions" ng-selected="    
{{form.type==tp.value?true:false}}" value="{{tp.value}}">{{tp.name}}</option>

Answer 21

JQuery के साथ एक पीस समाधान जब आप विकल्पों का नियंत्रण नहीं है

एचटीएमएल:

<select id="selector" ng-select="selector" data-ng-init=init() >
...
</select>

js:

$scope.init = function () {
    jQuery('#selector option:first').remove();
    $scope.selector=jQuery('#selector option:first').val();
}

Comments

पास्कल, किसी ने आपको

— नीचा दिखाया

प्रश्न कोणीय के और अधिक खोदने के लिए कहा गया है ...: - /

— साहू वी कुमार

Answer 22

यदि आप इस समस्या को हल करने के लिए अपने मॉडल का उपयोग एनजीटी में करते हैं:

<select ng-model="foo" ng-app ng-init="foo='2'">

Answer 23

मेरे पास एक ही समस्या थी, मैंने ("एनजी-मॉडल" हटा दिया) इसे बदल दिया:

<select ng-model="mapayear" id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

इसके लिए:

<select id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

अब इसका काम हो रहा है, लेकिन मेरे मामले में यह कारण था कि ng.controller से उस दायरे को हटा दिया गया, अगर यू ने ऐसा नहीं किया।

Answer 24

नमस्ते, मेरे पास कुछ जेकरी मोबाइल संदर्भ थे और मैंने उन्हें हटा दिया। JQuery मोबाइल के साथ उपरोक्त में से कोई भी सुधार मेरे काम नहीं आया। (यह बहुत अच्छा है अगर कोई jQuery के मोबाइल और कोणीय जेएस के बीच संघर्ष की व्याख्या कर सकता है)

https://guntucomputerhacks.blogspot.com.au/2017/10/angular-js-drop-down-first-options-vs.html

Answer 25

मेरे लिए एक ही चीज़ काम कर track byरही है ng-options, जैसे:

 <select class="dropdown" ng-model="selectedUserTable" ng-options="option.Id as option.Name for option in userTables track by option.Id">

Comments

अगर मैं का उपयोग इस ng-optionसरणी का अंतिम मान जो मैं के निर्धारित मूल्य के लिए चाहते optionका select। इसका हल नहीं हुआ :(

— rufatZZ

Answer 26

इन मुद्दों को दूर करने के लिए कोणीय दस्तावेज़ों से उदाहरण देखें।

1. इस डॉक्यूमेंट लिंक पर यहां जाएं
2. ' बाइंडिंग सिलेक्ट को नॉन-स्ट्रिंग वैल्यू एनजीमॉडल पार्सिंग / फॉर्मेटिंग ' के जरिए खोजें
3. वहाँ आप देख सकते हैं, निर्देश ' ConvertToNumber ' समस्या को हल करता है।

इससे मेरा काम बनता है। यह भी देख सकते हैं कि यह यहां कैसे काम करता है

Answer 27

हम पहले विकल्प को छिपाने के लिए CSS का उपयोग कर सकते हैं, लेकिन यह IE 10, 11. में काम नहीं करेगा। सबसे अच्छा तरीका है कि जक्वरी का उपयोग करके तत्व को हटा दें। यह समाधान क्रोम और IE10, 11 में परीक्षण किए गए प्रमुख ब्राउज़र के लिए काम करता है

इसके अलावा अगर आप कोणीय का उपयोग कर रहे हैं, कभी-कभी सेटटाइमआउट कार्यों का उपयोग करते हैं

$scope.RemoveFirstOptionElement = function (element) {
    setTimeout(function () {
        $(element.children()[0]).remove();
    }, 0);
};