मैं AngularJS के एनजी विकल्पों में मूल्य संपत्ति कैसे निर्धारित करूं?

Question

यहाँ वह है जो बहुत सारे लोगों को परेशान कर रहा है (मेरे सहित)।

ng-optionsएक <select>टैग के लिए विकल्पों को भरने के लिए AngularJS में निर्देश का उपयोग करते समय , मैं यह नहीं पता लगा सकता कि विकल्प के लिए मूल्य कैसे निर्धारित किया जाए। इसके लिए प्रलेखन वास्तव में अस्पष्ट है - कम से कम मेरे जैसे एक साधारण व्यक्ति के लिए।

मैं इस तरह से आसानी से एक विकल्प के लिए पाठ सेट कर सकते हैं:

ng-options="select p.text for p in resultOptions"

जब resultOptionsउदाहरण के लिए है:

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

विकल्प मानों को सेट करने के लिए यह (और शायद है) सबसे सरल बात होनी चाहिए, लेकिन अभी तक मुझे यह नहीं मिला है।

Comments

एक ही समस्या थी क्योंकि मुझे डॉक्स नहीं मिला (जैसा कि नीचे दिखाया गया है) बहुत स्पष्ट है।

— benvds

"चयन" का उपयोग क्योंकि यह प्रश्न में दर्शाया गया है, अनिवार्य रूप से गलत है, क्योंकि इस संदर्भ में "चयन" एक कीवर्ड नहीं है, लेकिन यह एक अभिव्यक्ति के लिए एक स्थान धारक है। यह एंगुलरजेएस के प्रलेखन से है: "चयन: इस अभिव्यक्ति का परिणाम मूल तत्व के मॉडल के लिए बाध्य होगा। यदि निर्दिष्ट नहीं किया गया है, तो चयन अभिव्यक्ति मान के लिए डिफ़ॉल्ट होगा।" मैंने नीचे अपने उत्तर में और विवरण दिया है।

— मेजिक्स

मेरे लिए यह सबसे अच्छा जवाब है। stackoverflow.com/questions/12139152/…

— संजय

नोट: काम करने के लिए एनजी विकल्पों के लिए, एनजी-मॉडल अनिवार्य है !!!!!!!!! Ref: stackoverflow.com/a/13049740/234110

— आनंद रॉकज़

stackoverflow.com/questions/18615624/…

— शफ़क़त अली

Answer 1

देखें ngOptions

ngOptions (वैकल्पिक) - { comprehension_expression=} - निम्न में से किसी एक रूप में:

सरणी डेटा स्रोतों के लिए : label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr ऑब्जेक्ट डेटा स्रोतों के लिए: label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

आपके मामले में, यह होना चाहिए

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

अपडेट करें

AngularJS पर अपडेट के साथ, अभिव्यक्ति के साथ तत्व की valueविशेषता के लिए वास्तविक मूल्य निर्धारित करना अब संभव है ।selecttrack by

<select ng-options="obj.text for obj in array track by obj.value">
</select>

इस बदसूरत सामान को कैसे याद रखें

उन सभी लोगों के लिए जो इस सिंटैक्स फॉर्म को याद करने के लिए कठिन समय दे रहे हैं: मैं मानता हूं कि यह सबसे आसान या सुंदर सिंटैक्स नहीं है। यह सिंटैक्स, पायथन की सूची समझ का एक विस्तारित संस्करण है और यह जानना कि मुझे सिंटैक्स को आसानी से याद करने में मदद मिलती है। यह कुछ इस तरह है:

पायथन कोड:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

यह वास्तव में ऊपर सूचीबद्ध पहले के रूप में एक ही वाक्यविन्यास है। हालाँकि, <select>हमें आमतौर पर कोड में वास्तविक मूल्य और एक <select>तत्व में दिखाए गए पाठ (लेबल) के बीच अंतर करने की आवश्यकता होती है ।

जैसे, हमें person.idकोड की आवश्यकता है, लेकिन हम idउपयोगकर्ता को दिखाना नहीं चाहते हैं ; हम इसका नाम दिखाना चाहते हैं। इसी तरह, हमें person.nameकोड में कोई दिलचस्पी नहीं है । वहाँ asसामान लेबल करने के लिए कीवर्ड आता है । तो यह इस तरह हो जाता है:

person.id as person.name for person in people

या, इसके बजाय person.idहमें personउदाहरण / संदर्भ की आवश्यकता हो सकती है। निचे देखो:

person as person.name for person in people

जावास्क्रिप्ट ऑब्जेक्ट्स के लिए भी यही तरीका लागू होता है। बस याद रखें कि ऑब्जेक्ट में आइटम (key, value)जोड़े के साथ deconstructed हैं ।

Comments

आपका उदाहरण विकल्प के मूल्य विशेषता को नहीं भरता है। यह परिभाषित करता है कि <select> तत्व के मॉडल में क्या संग्रहीत किया जाएगा। Obj.value के रूप में obj.text और obj.text के

— Artem Andreev

अजीब लेकिन मुझे क्रोम और एफएफ में <विकल्प मूल्य = "0"> 1 </ विकल्प>, <विकल्प मूल्य = "1"> 2 </ विकल्प> मिलता है।

— आर्टेम एंड्रीव

यह बग नहीं है, यह एक विशेषता है। angularjs आंतरिक रूप से ngOptions और ngModel को संभालता है, इस तरह से यह आपको केवल स्ट्रिंग्स के बजाय किसी भी प्रकार की ऑब्जेक्ट को विकल्प के रूप में उपयोग करने की अनुमति देता है। आपको अपने आसपास के दूसरे तरीके का चयन करने के लिए कभी भी प्रयास नहीं करना चाहिए, बस आपको एनजीमॉडल का उपयोग करने की आवश्यकता है जो आप चयनित तत्व से जुड़े हैं।

— उमुर कोंटाकी

क्षमा करें मैं असहमत हूं। आंतरिक रूप से चयनित निर्देश आसानी से अपने स्वयं के अदृश्य मॉडल का उपयोग करने के लिए ट्रैक कर सकता है कि कौन सा विकल्प चुना गया है। यहां तक ​​कि अगर यह मॉडल मूल्य को आंतरिक रूप से ट्रैक नहीं करता है, तो यह कम से कम विकल्पों को प्रस्तुत कर सकता है और बस खाली विकल्प का चयन कर सकता है (जो कि वह व्यवहार है जो अब करता है यदि आप मॉडल को मूल्य सेट में नहीं सेट करते हैं) । विकल्प दिखाने के लिए एकमात्र निर्भरता स्वयं विकल्प हैं - यहां पोला सिद्धांत लागू होता है।

— ईजेकील विक्टर

जब यह जवाब नहीं देता है तो इस जवाब में इतने वोट क्यों होते हैं? frm.adiputra का उत्तर सही है।

— नोइशे

Answer 2

मूल्य विशेषताओं को उसका मूल्य कैसे मिलता है:

• किसी सरणी को डेटा स्रोत के रूप में उपयोग करते समय, यह प्रत्येक पुनरावृत्ति में सरणी तत्व का सूचकांक होगा;
• किसी ऑब्जेक्ट को डेटा स्रोत के रूप में उपयोग करते समय, यह प्रत्येक पुनरावृत्ति में गुण का नाम होगा।

तो आपके मामले में यह होना चाहिए:

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

Comments

+1 यह समझाने के लिए कि कोणीय विकल्प तत्वों का मान गुण कैसे सेट करता है।

— मार्क राजकोक

यह कोई मान सेट नहीं करता है। संख्या के लिए डिफ़ॉल्ट डिफ़ॉल्ट। लेकिन आप वास्तव में एक "मूल्य" .. हास्यास्पद .. निर्दिष्ट नहीं कर सकते

— ट्रिप

@ ट्राइप, यदि आप चुनिंदा विकल्पों का 'निरीक्षण' करते हैं, तो आपको संख्याएँ दिखाई देंगी, लेकिन यदि आप मॉडल में बंधे मूल्य को देखते हैं, तो मान इस मामले में 'k' मान है। यह भ्रमित करने वाला है। blesh में एक प्लंक है जो इस उत्तर में दिखाता है: stackoverflow.com/questions/13047923/… plnkr.co/edit/vJOljg?p=preview

— TenseYing

इसे कोणीय दस्तावेज़ में शामिल किया जाना चाहिए, छोटा और सटीक। +1

— डेविक

यह एकमात्र समाधान है जिसने मेरे लिए काम किया। क्या बुरा सिरदर्द है।

— जॉन

Answer 3

मेरा भी यह मुद्दा था। मैं एनजी-विकल्पों में अपना मूल्य निर्धारित करने में सक्षम नहीं था। उत्पन्न होने वाला प्रत्येक विकल्प 0, 1, ..., n के साथ सेट किया गया था।

इसे सही बनाने के लिए, मैंने अपने एनजी विकल्पों में ऐसा कुछ किया:

HTML:

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

मैं अपने सभी मूल्यों को सेट करने के लिए "ट्रैक बाय" का उपयोग करता हूं room.price।

(यह उदाहरण बेकार है: क्योंकि यदि एक से अधिक मूल्य समान थे, तो कोड विफल हो जाएगा। इसलिए विभिन्न मूल्यों के लिए सुनिश्चित करें।)

JSON:

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

मैंने इसे ब्लॉग पोस्ट से सीखा है कि Angular.JS एनजी-विकल्प और ट्रैक के उपयोग से एक चयनित तत्व के प्रारंभिक चयनित मूल्य को कैसे सेट करें ।

वीडियो देखना। यह एक अच्छा वर्ग है :)

Comments

यह पूरी तरह से काम करता है। इसके शीर्ष पर, यह एक डटलिस्ट तत्व को एक समाहित <select> के साथ उपयोग करने की अनुमति देता है ताकि डटलिस्ट अपने मूल्य के माध्यम से विकल्पों का संदर्भ दे सके। साभार @Bruno गोम्स

— पर्वतारोही

यह एकमात्र उपाय है जो मेरे लिए काम करता है। धन्यवाद।

— निनेर

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

— वेबब्लोवर

धन्यवाद! यह बहुत लंबे समय तक निराशाजनक था!

— सीन थॉम्पसन

मुझे उम्मीद है कि कमरे की कीमतें कभी भी समान नहीं होंगी, क्योंकि तब यह टूट जाती है।

— nilskp

Answer 4

यदि आप अपने optionतत्वों के मूल्य को बदलना चाहते हैं क्योंकि प्रपत्र अंततः ऐसा करने के बजाय सर्वर को प्रस्तुत किया जाएगा,

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

तुम यह केर सकते हो:

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

तब अपेक्षित मान सही नाम के तहत फॉर्म के माध्यम से भेजा जाएगा।

Comments

मैं उपयोग करने के बजाय उसे जोड़ूंगा <input type="hidden" name="text" value="{{ text }}" />, मैं उपयोग करूंगा ng-value। तो: <input type="hidden" name="text" ng-value="{{ text }}" />।

— डैन एटकिंसन

मेरे मामले में स्पष्ट करने के लिए, मैं एक json पोस्ट का उपयोग करके कोणीय के माध्यम से फॉर्म जमा नहीं कर रहा हूं - बल्कि मैं सामान्य रूप से http पोस्ट का उपयोग करके फॉर्म सबमिट कर रहा हूं, इसलिए एंगुलर <विकल्प> टैग में डाले गए मानों को ओवरराइड करके मुझे सही सबमिट करने की अनुमति देता है मूल्य (धन्यवाद!)। मुझे छिपे हुए इनपुट में एनजी-मूल्य का उपयोग करने की आवश्यकता नहीं थी, बल्कि मुझे मूल पोस्ट नोट्स के रूप में मूल्य टैग सेट करने की आवश्यकता थी।

— फायरड्रैगन

Answer 5

my_heroसामान्य फ़ॉर्म सबमिट का उपयोग करके सर्वर को कॉल किए गए कस्टम मान भेजने के लिए:

JSON:

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML:

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

सर्वर को ironया तो superमान के रूप में या प्राप्त होगा my_hero।

यह @neemzy द्वारा उत्तर के समान है , लेकिन valueविशेषता के लिए अलग डेटा निर्दिष्ट करता है।

Answer 6

ऐसा प्रतीत होता है कि ng-optionsउपयोग करने के लिए जटिल (संभवतः निराशाजनक) है, लेकिन वास्तव में हमारे पास वास्तुकला की समस्या है।

AngularJS एक गतिशील HTML + जावास्क्रिप्ट एप्लिकेशन के लिए MVC फ्रेमवर्क के रूप में कार्य करता है। हालांकि इसका (V) iew घटक HTML "टेम्प्लेटिंग" की पेशकश करता है, इसका प्राथमिक उद्देश्य उपयोगकर्ता क्रियाओं को एक नियंत्रक के माध्यम से, मॉडल में परिवर्तन से जोड़ना है। इसलिए अमूर्तता का उचित स्तर, जिसमें से कोणीयजेजेएस में काम करना है, यह है कि एक चुनिंदा तत्व एक मॉडल में एक क्वेरी से एक मूल्य निर्धारित करता है ।

• कैसे एक प्रश्न पंक्ति उपयोगकर्ता के लिए प्रस्तुत किया जाता है (वी) iew के चिंता का विषय है और ng-optionsप्रदान करता है forकीवर्ड हुक्म क्या विकल्प तत्व की सामग्री होना चाहिए यानी p.text for p in resultOptions ।
• सर्वर को एक चयनित पंक्ति कैसे प्रस्तुत की जाती है (एम) ओडेल की चिंता। इसलिए ng-options, यह asनिर्दिष्ट करने के लिए कीवर्ड प्रदान करता है कि मॉडल को किस मूल्य में प्रदान किया गया है k as v for (k,v) in objects।

समस्या का सही समाधान तब प्रकृति में वास्तुशिल्प है और इसमें आपके HTML को फिर से शामिल करना शामिल है ताकि आवश्यकता होने पर (M) odel सर्वर संचार करता है (बजाय उपयोगकर्ता एक फ़ॉर्म सबमिट करने के)।

यदि MVC HTML पृष्ठ अनावश्यक रूप से हाथ में समस्या के लिए ओवर-इंजीनियरिंग है: तो केवल AngularJS's (V) iew घटक के HTML पीढ़ी भाग का उपयोग करें। इस स्थिति में, उसी पैटर्न का पालन करें जो कि <li />'s <ul />' के तहत तत्वों को उत्पन्न करने के लिए प्रयोग किया जाता है और एक विकल्प तत्व पर एनजी-रिपीट जगह देता है:

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

कीचड़ के रूप में , कोई हमेशा चुनिंदा तत्व के नाम विशेषता को एक छिपे हुए इनपुट तत्व में स्थानांतरित कर सकता है:

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

Comments

एक विकल्प तत्व पर एनजी-रिपीट का उपयोग करते समय खराब प्रदर्शन, संभवतः? आप केवल चयन पर एनजी-विकल्पों का उपयोग करने वाले हैं।

— DrCord

@ कॉर्ड: विकल्प तत्व पर एनजी-रिपीट का उपयोग केवल पृथक मामलों में समाधान के रूप में प्रस्तुत किया जाता है (जब उचित एमवीसी एचटीएमएल पेज अनावश्यक ओवर-इंजीनियरिंग होता है)। शायद downvoter ने इसे बहुत बारीकी से तैयार नहीं किया। यह विशेष रूप से कॉल आउट करने के लिए संपादित किया जाएगा कि विकल्प तत्व पर एनजी-रिपीट आदर्श मामला नहीं है।

— जोशकोड्स

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

— इयान लुईस

यह एंगुलरजेएस की वेबसाइट पर यह कहता है: docs.angularjs.org/api/ng/directive/select । "Note: ngOptions provides an iterator facility for the <option> element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can only be bound to string values at present."। प्रदर्शन का कोई उल्लेख नहीं है, केवल यह कि ngOptions ngRepeat का एक विकल्प है।

— इयान लुईस

@IanLewis, धन्यवाद, जो समझ में आता है। मुझे इससे कोई मतलब नहीं था कि एक अनिर्दिष्ट चयन के विकल्पों पर ngRepeat किसी भी कम प्रदर्शनकर्ता क्यों होगा, यह <li> टैग पर है।

— जोशकोड्स

Answer 7

तुम यह केर सकते हो:

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

-- अपडेट करें

कुछ अपडेट के बाद, उपयोगकर्ता frm.adiputra का समाधान बहुत बेहतर है। कोड:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

Comments

चुनिंदा तत्व / निर्देश के अंदर एनजी-विकल्प का उपयोग करना बेहतर है। जैसे, <एनजी-मॉडल = "मॉडल" एनजी-विकल्प = "obj.id as obj.name के लिए सरणी में>>" का चयन करें। आपके पास क्या काम है, लेकिन यह अन्य कोणीय निर्माणों के साथ काम नहीं करेगा। उदाहरण के लिए, यह एनजी-क्लिक आपके कोड के साथ काम नहीं करेगा: <a ng-click="model=1"> 1 का चयन करें </a>, लेकिन यह काम करता है अगर एनजी-विकल्प का उपयोग किया जाता है।

— मार्क राजकोक

मैं सिर्फ इस तरह से करने के कारण एक अजीब बग दिखा था। बहुत खोजा हुआ दर्द मुझे गैर-विकल्पों की खोज में ले गया, और बग गायब हो गया। एनजी-मॉडल को यह आवश्यक लगता है कि विकल्पों का मूल्य विशेषता संख्यात्मक और आरोही है। 0. यदि आप एनजी-रिपीट और <विकल्प> टैग का उपयोग करके किसी गैर संख्यात्मक सूचकांक में मूल्य बदलते हैं, तो मॉडल में परिवर्तन हमेशा नहीं होता है चयन बॉक्स में प्रतिबिंबित।

— नोइशे

Answer 8

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

अंत में, मेरे लिए, यह कम के लिए आया अधिक है।

एक गुंजाइश को देखते हुए कॉन्फ़िगर किया गया है:

        //Data used to populate the dropdown list
        $scope.list = [
           {"FirmnessID":1,"Description":"Soft","Value":1},         
           {"FirmnessID":2,"Description":"Medium-Soft","Value":2},
           {"FirmnessID":3,"Description":"Medium","Value":3}, 
           {"FirmnessID":4,"Description":"Firm","Value":4},     
           {"FirmnessID":5,"Description":"Very Firm","Value":5}];

        //A record or row of data that is to be save to our data store.
        //FirmnessID is a foreign key to the list specified above.
        $scope.rec = {
           "id": 1,
           "FirmnessID": 2
        };

यह सब मुझे वांछित परिणाम प्राप्त करने के लिए आवश्यक है:

        <select ng-model="rec.FirmnessID"
                ng-options="g.FirmnessID as g.Description for g in list">
            <option></option>
        </select>   

सूचना मैंने उपयोग नहीं की track by। track byचयनित आइटम का उपयोग करने से वह फर्म वापस आ जाएगी, जो कि फर्मनेसआईडी से मेल खाने वाली फर्म के बजाय फर्मनेसिड से मेल खाती है। यह अब मेरे मानदंड को पूरा करता है, जो यह है कि इसे ऑब्जेक्ट के बजाय एक संख्यात्मक मान लौटाया जाना चाहिए, और ng-optionsउत्पन्न होने वाले प्रत्येक विकल्प के लिए एक नया स्कोप न बनाकर प्रदर्शन सुधार प्राप्त करने के लिए उपयोग करना चाहिए।

इसके अलावा, मैं पहली पंक्ति खाली है, तो मैं बस एक अतिरिक्त जरूरत <option>के लिए <select>तत्व।

यहाँ एक प्लंकर है जो मेरे काम को दिखाता है।

Comments

लीजेंड। मुझे ठीक इसी की आवश्यकता थी। ठनक यू

— Kildareflare

महान, लेकिन "मूल्य" कुंजी का उद्देश्य क्या है? वे आवश्यक प्रतीत नहीं होते।

— mhenry1384

उदाहरण के लिए प्रासंगिक नहीं है। वे मूल रूप से मेरे ग्राहक द्वारा मुझे प्रदान किए गए डेटा का हिस्सा हैं।

— जेफरी ए। गोचिन

Answer 9

नई 'ट्रैक बाय' सुविधा का उपयोग करने के बजाय आप इसे केवल एक सरणी के साथ कर सकते हैं यदि आप चाहते हैं कि मान पाठ के समान हों:

<select ng-options="v as v for (k,v) in Array/Obj"></select>

मानक सिंटैक्स के बीच अंतर पर ध्यान दें, जो मानों को ऑब्जेक्ट / एरे की कुंजी बना देगा, और इसलिए किसी सरणी के लिए 0,1,2 आदि:

<select ng-options"k as v for (k,v) in Array/Obj"></select>

k as v v v के रूप में v हो जाता है ।

मैंने इसे सिंटैक्स को देखने वाले सामान्य ज्ञान पर आधारित पाया। (k, v) वास्तविक कथन है जो सरणी / वस्तु को मुख्य मूल्य युग्मों में विभाजित करता है।

'K as v' कथन में, k का मान होगा, और v उपयोगकर्ता को प्रदर्शित पाठ विकल्प होगा। मुझे लगता है कि 'ट्रैक बाय' गन्दा और ओवरकिल है।

Comments

Waaaaat? मेरे पृष्ठों पर सभी जगह सरणियों के लिए काम करता है, क्या हम AngularJS के समान संस्करण का उपयोग कर रहे हैं?

— KthProg

Answer 10

यह मेरे अनुसार सभी परिदृश्यों के लिए सबसे उपयुक्त था:

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</select>

जहां आप डेटा को बांधने के लिए अपने मॉडल का उपयोग कर सकते हैं। आपको वह मान मिलेगा, जिसमें ऑब्जेक्ट शामिल होगा और आपके परिदृश्य के आधार पर डिफ़ॉल्ट चयन होगा।

Comments

इस घोल से प्यार करें। इस निर्देश के लिए उनके कोणीय सहायक अनावश्यक रूप से जटिल हैं। उपयोग की स्व-घोषित न्यायाधीश होने के लिए धन्यवाद।

— डेविड मेलिन

Answer 11

इसी से मैंने इसका हल निकाला। मैंने मूल्य का चयन करके ट्रैक किया और चयनित आइटम प्रॉपर्टी को अपने जावास्क्रिप्ट कोड में मॉडल पर सेट किया।

Countries =
[
    {
        CountryId = 1, Code = 'USA', CountryName = 'United States of America'
    },
    {
       CountryId = 2, Code = 'CAN', CountryName = 'Canada'
    }
]

<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">

vmमेरा नियंत्रक है और सेवा से प्राप्त नियंत्रक में देश है {CountryId =1, Code = 'USA', CountryName='United States of America'}।

जब मैंने चुनिंदा ड्रॉपडाउन से दूसरे देश का चयन किया और "सेव" के साथ अपना पेज पोस्ट किया, तो मुझे सही देश मिला।

Answer 12

ng-optionsनिर्देश पर मूल्य विशेषता निर्धारित नहीं करता है <options>सरणियों के लिए तत्वों:

उपयोग का limit.value as limit.text for limit in limitsअर्थ है:

सेट <option>के रूप में के लेबल limit.text
को बचाने limit.valueका चयन के रूप में मूल्यng-model

स्टैक ओवरफ्लो प्रश्न देखें AngularJS एनजी विकल्प मान प्रदान नहीं करते हैं ।

Answer 13

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>

Answer 14

मूल्य और प्रदर्शन सदस्यों को चुनने के लिए टैग टैग बाइंडिंग प्राप्त करने के लिए आप एनजी विकल्पों का उपयोग कर सकते हैं

इस डेटा स्रोत का उपयोग करते समय

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

आप मूल्य और नाम के लिए अपने चुनिंदा टैग को बांधने के लिए नीचे का उपयोग कर सकते हैं

<select name="text" ng-model="name" ng-options="c.key as c.name for c in countries"></select>

यह बहुत अच्छा काम करता है

Comments

कृपया अपने कोड-केवल उत्तर को कुछ स्पष्टीकरण के साथ बढ़ाएं, ताकि भ्रांति से बचने के लिए कि StackOverflow एक नि: शुल्क कोड लेखन सेवा है।

— युन्नोस्क

Answer 15

इस प्रश्न का सही उत्तर उपयोगकर्ता frm.adiputra द्वारा प्रदान किया गया है , क्योंकि वर्तमान में यह विकल्प तत्वों के मूल्य विशेषता को स्पष्ट रूप से नियंत्रित करने का एकमात्र तरीका है।

हालांकि, मैं सिर्फ इस बात पर जोर देना चाहता था कि "चयन" इस संदर्भ में एक कीवर्ड नहीं है, लेकिन यह अभिव्यक्ति के लिए सिर्फ एक प्लेसहोल्डर है। कृपया निम्न सूची का संदर्भ लें, "चयन" अभिव्यक्ति की परिभाषा के साथ-साथ अन्य अभिव्यक्तियाँ जो एनजी-विकल्प निर्देश में उपयोग की जा सकती हैं।

प्रश्न में इसका चयन के रूप में उपयोग किया गया है:

ng-options='select p.text for p  in resultOptions'

अनिवार्य रूप से गलत है।

अभिव्यक्तियों की सूची के आधार पर, ऐसा लगता है कि ट्रैकएक्सप्रैस का उपयोग मूल्य को निर्दिष्ट करने के लिए किया जा सकता है, जब विकल्पों को एक सरणी में दिया जाता है, लेकिन इसका उपयोग केवल समूह के साथ किया गया है।

---

गैर-विकल्पों के लिए AngularJS के प्रलेखन से:

• सरणी / वस्तु : एक ऐसी अभिव्यक्ति जो किसी सरणी / वस्तु का मूल्यांकन करने से अधिक हो जाती है।
• मूल्य : स्थानीय चर जो सरणी के प्रत्येक आइटम या पुनरावृत्ति के दौरान ऑब्जेक्ट के प्रत्येक गुण मान को संदर्भित करेगा।
• कुंजी : स्थानीय वैरिएबल जो पुनरावृत्ति के दौरान ऑब्जेक्ट में एक संपत्ति के नाम को संदर्भित करेगा।
• लेबल : इस अभिव्यक्ति का परिणाम तत्व के लिए लेबल होगा। अभिव्यक्ति सबसे अधिक संभावना मान चर (उदाहरण मान .propertyName) को संदर्भित करेगी।
• चयन करें : इस अभिव्यक्ति का परिणाम मूल तत्व के मॉडल के लिए बाध्य होगा। यदि निर्दिष्ट नहीं किया गया है, तो चयन अभिव्यक्ति मान के लिए डिफ़ॉल्ट होगी।
• समूह : इस अभिव्यक्ति का परिणाम DOM तत्व का उपयोग करके समूह विकल्पों में किया जाएगा।
• trackexpr : वस्तुओं की एक सरणी के साथ काम करते समय इस्तेमाल किया। इस अभिव्यक्ति के परिणाम का उपयोग सरणी में वस्तुओं की पहचान करने के लिए किया जाएगा। Trackexpr सबसे अधिक मूल्य चर (उदाहरण value.propertyName) को संदर्भित करेगा।

Answer 16

एनजी-ऑप्शंस में एक आइटम का चयन करना थोड़ा मुश्किल हो सकता है, जो इस बात पर निर्भर करता है कि आपने डेटा स्रोत कैसे सेट किया है।

कुछ समय तक उनसे जूझने के बाद मैंने सबसे आम डेटा स्रोतों के साथ एक नमूना तैयार किया जिसका मैं उपयोग करता हूं। आप इसे यहां देख सकते हैं:

http://plnkr.co/edit/fGq2PM?p=preview

अब गैर-विकल्प काम करने के लिए, यहाँ कुछ बातों पर विचार किया गया है:

1. आम तौर पर आपको एक स्रोत से विकल्प और दूसरे से चयनित मूल्य मिलता है। उदाहरण के लिए:
   • राज्यों :: एनजी विकल्पों के लिए डेटा
   • user.state :: चयनित के रूप में सेट करने का विकल्प
2. 1 के आधार पर, सबसे आसान / तार्किक बात यह है कि चयन को एक स्रोत से भरना है और फिर चयनित मूल्य गर्त कोड निर्धारित करना है। शायद ही कभी एक मिश्रित डेटासेट प्राप्त करना बेहतर होगा।
3. AngularJS चुनिंदा नियंत्रणों को अधिक से अधिक रखने की अनुमति देता है key | label। कई ऑनलाइन उदाहरण वस्तुओं को 'कुंजी' के रूप में रखते हैं, और यदि आपको ऑब्जेक्ट से जानकारी की आवश्यकता होती है, तो इसे उसी तरह से सेट करें, अन्यथा कुंजी के रूप में आपको आवश्यक विशिष्ट संपत्ति का उपयोग करें। (ID, CODE, आदि .. जैसा कि plckr नमूने में है)

4. ड्रॉपडाउन / चयन नियंत्रण का मान सेट करने का तरीका # 3 पर निर्भर करता है,

   • यदि ड्रॉपडाउन कुंजी एक एकल गुण है (जैसे प्लंक्र में सभी उदाहरणों में), तो आप इसे सेट करते हैं, जैसे: $scope.dropdownmodel = $scope.user.state;

   • यदि आप ऑब्जेक्ट को कुंजी के रूप में सेट करते हैं, तो आपको विकल्पों को ट्रूप करने की आवश्यकता होती है, यहां तक ​​कि ऑब्जेक्ट को असाइन करने पर भी आइटम सेट नहीं किया जाएगा जैसा कि उनके पास अलग-अलग हैशेक होगा, जैसे:

     for (var i = 0, len = $scope.options.length; i < len; i++) {
       if ($scope.options[i].id == savedValue) { // Your own property here:
         console.log('Found target! ');
         $scope.value = $scope.options[i];
         break;
       }
     }

आप अन्य वस्तु में एक ही प्रॉपर्टी के लिए savedValue जगह ले सकता है $scope.myObject.myProperty।

Comments

एक साल से अधिक समय बाद, मैं आपको प्लंकर के नमूने के लिए धन्यवाद देता हूं। बहुत उपयोगी।

— bob.mazzo

Answer 17

मेरे लिए ब्रूनो गोम्स का जवाब सबसे अच्छा जवाब है।

लेकिन वास्तव में, आपको चुनिंदा विकल्पों की मूल्य संपत्ति सेट करने के बारे में चिंता करने की आवश्यकता नहीं है। एंगुलरजेएस इसका ख्याल रखेगा। मुझे विस्तार से बताएं।

कृपया इस पर विचार करें

angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {

    $scope.timeFormatTemplates = [{
        label: "Seconds",
        value: 'ss'
    }, {
        label: "Minutes",
        value: 'mm'
    }, {
        label: "Hours",
        value: 'hh'
    }];


    $scope.inactivity_settings = {
        status: false,
        inactive_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.activity_settings = {
        status: false,
        active_time: 60 * 5 * 3, // 15 min (default value), that is,  900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.changedTimeFormat = function (time_format) {
        'use strict';

        console.log('time changed');
        console.log(time_format);
        var newValue = time_format.value;

        // do your update settings stuffs
    }
});

जैसा कि आप फिडेल आउटपुट में देख सकते हैं, जो भी आप चुनिंदा बॉक्स विकल्पों के लिए चुनते हैं, यह आपका कस्टम मूल्य है, या AngularJS द्वारा 0, 1, 2 ऑटो उत्पन्न मूल्य है, यह आपके आउटपुट में कोई फर्क नहीं पड़ता जब तक कि आप jQuery या किसी भी का उपयोग नहीं कर रहे हैं अन्य पुस्तकालय उस कॉम्बो बॉक्स विकल्पों के मूल्य तक पहुँचने के लिए और तदनुसार हेरफेर करते हैं।

Answer 18

प्रश्न के एक साल बाद, मुझे इस प्रश्न का उत्तर ढूंढना पड़ा क्योंकि इनमें से गैर ने वास्तविक उत्तर दिया, कम से कम मुझे।

आपने पूछा है कि विकल्प का चयन कैसे करें, लेकिन किसी ने भी यह नहीं कहा है कि ये दोनों चीजें समान नहीं हैं :

अगर हमारे पास इस तरह का कोई विकल्प है:

$scope.options = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];

और हम इस तरह एक डिफ़ॉल्ट विकल्प सेट करने का प्रयास करते हैं:

$scope.incorrectlySelected = { label: 'two', value: 2 };

यह काम नहीं करेगा , लेकिन अगर आप इस तरह के विकल्प का चयन करने की कोशिश करते हैं:

$scope.correctlySelected = $scope.options[1];

यह काम करेगा ।

भले ही इन दोनों वस्तुओं में समान गुण हों, लेकिन AngularJS उन्हें DIFFERENT मान रहा है क्योंकि AngularJS संदर्भ से तुलना करता है ।

Fiddle http://jsfiddle.net/qWzTb/ पर एक नज़र डालें ।

Answer 19

कृपया संपत्तियों द्वारा ट्रैक का उपयोग करें जो चुनिंदा बॉक्स में मूल्यों और लेबल को अलग करते हैं।

प्रयास करें

<select ng-options="obj.text for obj in array track by obj.value"></select>

जो पाठ और मान के साथ मान के साथ लेबल प्रदान करेगा (सरणी से)

Answer 20

एक वस्तु के लिए:

<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>

Answer 21

यह हमेशा एनजी विकल्पों के साथ डेवलपर्स के लिए दर्दनाक है। उदाहरण के लिए: चयनित टैग में रिक्त / रिक्त चयनित मान प्राप्त करना। खासकर जब JSON ऑब्जेक्ट्स को एनजी-ऑप्शंस में डील करते हैं, तो यह अधिक थकाऊ हो जाता है। यहाँ मैंने उस पर कुछ अभ्यास किया है।

उद्देश्य: एनजी-विकल्प के माध्यम से JSON ऑब्जेक्ट्स की इरेटेट सरणी और पहले चयनित तत्व को सेट करें।

डेटा:

someNames = [{"id":"1", "someName":"xyz"}, {"id":"2", "someName":"abc"}]

चुनिंदा टैग में मुझे xyz और abc दिखाना था, जहाँ xyz को बिना ज्यादा मेहनत किए चुना जाना चाहिए।

HTML:

<pre class="default prettyprint prettyprinted" style=""><code>
    &lt;select class="form-control" name="test" style="width:160px"    ng-options="name.someName for name in someNames" ng-model="testModel.test" ng-selected = "testModel.test = testModel.test || someNames[0]"&gt;
&lt;/select&gt;
</code></pre>

कोड नमूने के ऊपर, आप इस अतिशयोक्ति से बाहर निकल सकते हैं।

एक और संदर्भ :

Answer 22

ट्यूटोरियल ANGULAR.JS: NG-SELECT और NG-OPTIONS ने मुझे समस्या हल करने में मदद की:

<select id="countryId"
  class="form-control"
  data-ng-model="entity.countryId"
  ng-options="value.dataValue as value.dataText group by value.group for value in countries"></select>

Comments

लिंक के लिए धन्यवाद।

— PHPst

Answer 23

<select ng-model="output">
   <option ng-repeat="(key,val) in dictionary" value="{{key}}">{{val}}</option>
</select>

Comments

ngOptions कुछ लाभ प्रदान करता है जैसे कि प्रत्येक दोहराया उदाहरण के लिए नया स्कोप न बनाकर मेमोरी को कम करना और गति बढ़ाना, देखें: docs.angularjs.org/api/ng/directive/ngOptions

— mggSoft

Answer 24

कोड स्निपेट चलाएं और विविधताएं देखें। यहां त्वरित समझ के लिए ध्यान दिया गया है

1. उदाहरण 1 (वस्तु चयन): - ng-option="os.name for os in osList track by os.id"। यहाँ track by os.idमहत्वपूर्ण है और होना चाहिए वहाँ और os.id as नहीं करना चाहिए पहले os.name।

   • ng-model="my_os"के रूप में कुंजी के साथ एक वस्तु को स्थापित करना चाहिए आईडी की तरह my_os={id: 2}।

2. उदाहरण 2 (मूल्य चयन): - ng-option="os.id as os.name for os in osList"। यहाँ track by os.id नहीं होना os.id as चाहिए और पहले वहाँ होना चाहिएos.name ।

   • ng-model="my_os"जैसे मान पर सेट करना चाहिएmy_os= 2

बाकी कोड स्निपेट समझाएगा।

angular.module('app', []).controller('ctrl', function($scope, $timeout){
  
  //************ EXAMPLE 1 *******************
  $scope.osList =[
    { id: 1, name :'iOS'},
    { id: 2, name :'Android'},
    { id: 3, name :'Windows'}
  ]
  $scope.my_os = {id: 2};
  
  
  //************ EXAMPLE 2 *******************
  $timeout(function(){
    $scope.siteList = [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo'},
          { id: 3, name: 'Bing'}
        ];
   }, 1000);
    
    $scope.my_site = 2;
  
    $timeout(function(){
      $scope.my_site = 3;
    }, 2000);
})

fieldset{
  margin-bottom: 40px;
  }
strong{
  color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <!--//************ EXAMPLE 1 *******************-->
  <fieldset>
    <legend>Example 1 (Set selection as <strong>object</strong>)</legend>
    
    <select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
        <option value="">--Select--</option>
      </select>
    {{my_os}}
    
  </fieldset>
  
  
  <!--//************ EXAMPLE 2 *******************-->
  <fieldset>
    <legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
      <select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
        <option value="">--Select--</option>
      </select>
      {{my_site}}
  </fieldset>
  
</div>

Answer 25

जैसे पहले कई लोगों ने कहा, अगर मेरे पास कुछ इस तरह का डेटा है:

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

मैं इसका उपयोग करूंगा:

<select
    ng-model="selectedCountry"
    ng-options="obj.name for obj  in countries">
</select>

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

 $scope.selectedCountry = $scope.countries[0];

 // You need to watch changes to get selected value
 $scope.$watchCollection(function() {
   return $scope.selectedCountry
 }, function(newVal, oldVal) {
     if (newVal === oldVal) {
       console.log("nothing has changed " + $scope.selectedCountry)
     } 
     else {
       console.log('new value ' + $scope.selectedCountry)
     }
 }, true)

Answer 26

यहाँ मैं इस समस्या को एक विरासत आवेदन में हल करता हूँ:

HTML में:

ng-options="kitType.name for kitType in vm.kitTypes track by kitType.id" ng-model="vm.itemTypeId"

जावास्क्रिप्ट में:

vm.kitTypes = [
    {"id": "1", "name": "Virtual"},
    {"id": "2", "name": "Physical"},
    {"id": "3", "name": "Hybrid"}
];

...

vm.itemTypeId = vm.kitTypes.filter(function(value, index, array){
    return value.id === (vm.itemTypeId || 1);
})[0];

मेरा HTML विकल्प मान को ठीक से प्रदर्शित करता है।

Answer 27

निर्देश:

$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];

• केस -1) सरणी में मान के लिए लेबल:

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <p> age of selected item is : {{selectedItem.age}} </p>
      <select ng-model="selectedItem" ng-options="item.name for item in items">
      </select>
  </div>

आउटपुट स्पष्टीकरण (मान लिया गया है कि पहला आइटम चयनित):

चयनित = = नाम: 'ए', उम्र: २०} // // [डिफ़ॉल्ट रूप से, चयनित आइटम मूल्य आइटम के बराबर है ]

चयनित.इमेज। = 20

• केस -2) सरणी में मान के लिए लेबल के रूप में चुनें:

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <select ng-model="selectedItem" ng-options="item.age as item.name for item in items">
      </select>
  </div>

आउटपुट स्पष्टीकरण (मान लिया गया पहला आइटम चयनित): चुने गए = 20 // [भाग का चयन करें आइटम है। ]