एनजी-विकल्प सरल सरणी init के साथ

Question

मैं कोणीय के साथ थोड़ा भ्रमित हूँ और ng-options।

मेरे पास एक सरल सरणी है और मैं इसके साथ चयन करना चाहता हूं। लेकिन, मैं चाहता हूं कि विकल्प मूल्य = लेबल।

script.js

$scope.options = ['var1', 'var2', 'var3'];

एचटीएमएल

<select ng-model="myselect" ng-options="o for o in options"></select>

जो मैं समझता हूं:

<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>

मैं क्या चाहता हूँ:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

इसलिए मैंने कोशिश की:

<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>

<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>

(लेकिन यह काम नहीं किया।)

संपादित करें:

मेरा फॉर्म बाहरी रूप से प्रस्तुत किया गया है, यही कारण है कि मुझे 0 के बजाय मान के रूप में 'var1' की आवश्यकता है।

Answer 1

आपने वास्तव में अपने तीसरे प्रयास में इसे सही किया था।

 <select ng-model="myselect" ng-options="o as o for o in options"></select>

एक कार्यशील उदाहरण यहां देखें: http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview

चाल यह है कि AngularJS वैसे भी 0 से n तक की संख्या लिखता है, और मॉडल को अपडेट करते समय वापस अनुवाद करता है।

नतीजतन, HTML गलत दिखाई देगा लेकिन मूल्य चुनते समय मॉडल अभी भी ठीक से सेट किया जाएगा। (यानी AngularJS '0' को 'var1' में अनुवाद करेगा)

एपोकॉक द्वारा समाधान भी काम करता है, हालांकि यदि आप डेटा को अतुल्यकालिक रूप से लोड कर रहे हैं तो आप पा सकते हैं कि यह हमेशा सही ढंग से अपडेट नहीं होता है। स्कोप बदलने पर एनजीओ का उपयोग सही ढंग से होगा।

Comments

तुम विषय से दूर हो। आपको निर्देश समझ में नहीं आए। वह अपने valueमें चाहता है select।

— इपोक

मैं निर्देशों को समझ गया, हालांकि यह काफी संभावना है कि उसका इरादा मॉडल के 'मूल्य' को बांधने का है, और यह गलतफहमी है कि एंगुलरज जिस तरह से टैग प्रदान कर रहे हैं, उसके कारण क्या हो रहा है।

— जेम्स डेविस

यह काम करता है यदि आपको कोणीय के साथ चयन का मूल्य मिलता है, लेकिन मेरे मामले में (यानी क्लासिक सबमिट फॉर्म), मान 0,1,2,3 होगा, var1 नहीं, var2, var3

— Dragu

मुझे लगता है कि आप मॉडल के लिए बाध्य थे, लेकिन अगर आप केवल कोणीय रूप से प्रस्तुत किए गए फॉर्म को रेंडर करने के लिए AngularJS का उपयोग कर रहे हैं, तो EpokK के समाधान का उपयोग करें।

— जेम्स डेविस

क्या यह सिर्फ मेरे लिए है, या यह अब तक का सबसे जैक-अप और अस्पष्ट वाक्यविन्यास है?

— fool4jesus 3

Answer 2

आप उपयोग कर सकते हैं ng-repeatके साथ optionइस तरह:

<form>
    <select ng-model="yourSelect" 
        ng-options="option as option for option in ['var1', 'var2', 'var3']"
        ng-init="yourSelect='var1'"></select>
    <input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>

जब आप जमा करते हैं formतो आप छिपे हुए इनपुट का मूल्य प्राप्त कर सकते हैं।

---

DEMO

एनजी-चयनित एनजी-रिपीट

Comments

यदि आपने मेरा उत्तर कम कर दिया है, तो मेरे नए समाधान की जाँच करें।

— इपोक

Answer 3

आप कुछ का उपयोग कर सकते हैं

<select ng-model="myselect">
    <option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
        {{o}}
    </option>
</select>

एनसी-चयनित का उपयोग करके आप विकल्प चुन सकते हैं यदि माइसेप्ट प्रीफ़िल्ड था।

मैं वैसे भी एनजी विकल्पों पर इस विधि को पसंद करता हूं, क्योंकि एनजी विकल्प केवल सरणियों के साथ काम करता है। एनजी-रिपीट भी जैसन जैसी वस्तुओं के साथ काम करता है।

Comments

ng-optionsऑब्जेक्ट डेटा स्रोतों के साथ भी काम करता है। देखें docs.angularjs.org/api/ng/directive/select

— चार्ली Schliesser

हालांकि अन्य ने वर्कआर्डर दिया, यह सॉलक्शन अब तक की सबसे सुंदर और पुरानी html शैली के करीब है, दोनों कोणीय मॉडल बाइंडिंग और फॉर्म सबमिटल के साथ काम करती है। धन्यवाद!

— फदी चमिह

एनजी-चयनित को हैंडलबार की आवश्यकता नहीं है क्योंकि यह एक कोणीय निर्देश है। उत्कृष्ट समाधान।

— केसी स्पीकमैन

Answer 4

यदि आप अपना चयन निम्नलिखित की तरह करते हैं:

<select ng-model="myselect" ng-options="b for b in options track by b"></select>

तुम्हे मिल जाएगा:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

काम कर रहे बेला: http://jsfiddle.net/x8kCZ/15/

Comments

यह समाधान एकमात्र था जिसने मेरे लिए स्ट्रिंग के एक सरणी में प्रारंभिक मूल्य का चयन करने के लिए काम किया।

— Ena

हाँ, यह जवाब होना चाहिए, ट्रैक मेरे लिए जादू करता है।

— गर्नार्ड

उपरोक्त समाधानों के बाद मैं कम से कम उम्मीद कर रहा था लेकिन यह आसान तरीका था

— दहाल

Answer 5

<select ng-model="option" ng-options="o for o in options">

$ गुंजाइश। गोद लेने के परिवर्तन के बाद 'var1' के बराबर होगा, यहां तक ​​कि आप उत्पन्न html में मूल्य = "0" देखते हैं

plunker