AngularJS और एनजी-रिपीट के साथ प्रारंभिक चयन


133

मैं AngularJS 1.1.5 के साथ एनजी-रिपीट का उपयोग करके पूर्व-भरे हुए विकल्प से शुरुआत करने के लिए चयन-बॉक्स प्राप्त करने की कोशिश कर रहा हूं। इसके बजाय चयन हमेशा कुछ भी नहीं के साथ शुरू होता है। इसका एक खाली विकल्प भी है, जो मुझे नहीं चाहिए। मुझे लगता है कि कुछ भी नहीं चुने जाने का साइड इफेक्ट है।

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

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

यहाँ HTML है:

<body ng-app ng-controller="AppCtrl">
    <div>
        Operator is: {{filterCondition.operator}}
    </div>
    <select ng-model="filterCondition.operator">
       <option 
           ng-repeat="operator in operators" 
           value="{{operator.value}}"
       >
           {{operator.displayName}}
       </option>
    </select>
</body>

और जावास्क्रिप्ट:

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]
}

इसके लिए JS Fiddle: http://jsfiddle.net/coverbeck/FxM3B/2/


1
ngOption इसलिए बनाया गया क्योंकि ngRepeat के साथ ऐसा करने का कोई साफ तरीका नहीं था। विकल्प चुने जाने के बाद ngRepeat अनियंत्रित हो जाता है। क्या आपने अपने विकल्पों पर ngSelect सेट करने का प्रयास किया है
TheSharpieOne

हाँ! NgSelected काम किया! मैं एक अपडेटेड वर्किंग JsFiddle पोस्ट करूंगा।
चार्ल्स ओ।

यह ध्यान दिया जाना चाहिए कि AngualrJS 1.2 में यह कोड अलग तरह से काम करता है - यह एक नया खाली <OPTION> तत्व नहीं बनाता है, हालांकि, यह केवल सूची बॉक्स में पहला विकल्प चुनने में सक्षम है। आप इसे यहाँ
विटालिबी

जवाबों:


226

ठीक है। यदि आप सही तरीके का उपयोग नहीं करना चाहते हैं ng-options, तो आप पूर्व-चयनित कार्य करने के लिए निर्देश के ng-selectedलिए एक शर्त जांच तर्क के साथ विशेषता जोड़ सकते हैं option

<select ng-model="filterCondition.operator">
    <option ng-selected="{{operator.value == filterCondition.operator}}"
            ng-repeat="operator in operators"
            value="{{operator.value}}">
      {{operator.displayName}}
    </option>
</select>

Working Demo


37
मैं आपको इसका श्रेय दूंगा क्योंकि आपने इसे अपने दम पर पूरा किया और इसका पूरा उदाहरण दिया। यद्यपि मैं एनजी-विकल्पों के बारे में आपकी टिप्पणी से सहमत नहीं हूं "सही तरीका।" :) मैंने हमेशा स्वयं एनजी-ऑप्शंस का उपयोग किया है, लेकिन इसके लिए कुछ ऐसा करने की आवश्यकता है जो एनजी-ऑप्शंस का समर्थन न करे, जैसा कि यह छोटा है। और कोणीय डॉक्टर कहते हैं कि आप एनजी-रिपीट भी कर सकते हैं। धन्यवाद, चार्ल्स
चार्ल्स ओ।

धन्यवाद, यह कुछ विकल्पों को निष्क्रिय करने का एक आसान तरीका था।
डोरियन

11
एनजी-विकल्प केवल तब तक सही होता है जब तक इसका यूसेकस आपका फिट होता है। आपको विकल्प / ऑप्टग्रुप फ़ील्ड आदि में अतिरिक्त विशेषताओं / कक्षाओं की आवश्यकता हो सकती है
रहस्यमय

6
"सही तरीका" कभी-कभी काम नहीं करता है (उदाहरण के लिए, यदि आप विकल्प नामों को आबाद करने वाले तार का अनुवाद करना चाहते हैं)
btk

11
मुझे लगता है कि एनजी-सिलेक्टेड एक्सप्रेशन को {{}} के बिना होना चाहिए: एनजी-सिलेक्टेड = "ओपरेटर.वल्यू == फिल्टरकॉन्डिशन.ऑपरेटर"
मर्वंड

35

चयनित टैग के लिए, कोणीय एनजी-विकल्प निर्देश प्रदान करता है। यह आपको विकल्पों को सेट करने और डिफ़ॉल्ट सेट करने के लिए विशिष्ट रूपरेखा प्रदान करता है। यहाँ एनजी विकल्पों का उपयोग करके अद्यतन फ़िडल है जो उम्मीद के मुताबिक काम करता है: http://jsfiddle.net/FxM3B/4/

अद्यतित HTML (कोड समान रहता है)

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators">
</select>
</body>

3
हाय जेरेमी - मैं एनजी विकल्पों के बिना यह करने की कोशिश कर रहा हूं। जैसा कि मैंने अपने प्रश्न में कहा था और शॉन के उत्तर में, मैं प्रत्येक विकल्प पर शीर्षक विशेषता को सेट करना चाहूंगा, और मैं एनजी विकल्पों के साथ ऐसा नहीं कर सकता, जहां तक ​​मुझे पता है। धन्यवाद, चार्ल्स
चार्ल्स ओ।

9

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

यहाँ एक कार्यशील JSFiddle: http://jsfiddle.net/coverbeck/FxM3B/5/ है

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

HTML:

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator}}</div>
<select ng-model="filterCondition.operator">
   <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option>
</select>
</body>

जे एस:

function AppCtrl($scope) {

    $scope.filterCondition={
        operator: 'eq'
    }

    $scope.operators = [
        {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'},
        {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'}
     ]
}

टिप्पणी के रूप में पोस्ट करने के बारे में क्षमा करें। मुझे एक उदाहरण बनाने का मन नहीं था और मुझे यकीन नहीं था कि यह काम करेगा। यह सिर्फ एक कूबड़ था।
द शेर्पियोऑन

9

तथ्य यह है कि कोणीय विकल्प के लिए एक खाली विकल्प तत्व को इंजेक्ट कर रहा है, यह है कि डिफ़ॉल्ट रूप से इसे बांधने वाली मॉडल ऑब्जेक्ट को आरंभीकृत होने पर खाली मान के साथ आता है।

यदि आप एक डिफ़ॉल्ट विकल्प का चयन करना चाहते हैं तो आप संभवतः इसे नियंत्रक में दायरे पर सेट कर सकते हैं

$scope.filterCondition.operator = "your value here";

यदि आप एक खाली विकल्प प्लेसहोल्डर चाहते हैं, तो यह मेरे लिए काम करता है

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators">
  <option value="">Choose Operator</option>
</select>

2
यह अच्छा है, लेकिन कोणीय एक रिक्त विकल्प बनाता है। इससे कैसे बचा जाए?
MarceloBarbosa 17

1

जैसा कि सुझाव दिया गया है कि आपको एनजी विकल्पों का उपयोग करने की आवश्यकता है और दुर्भाग्य से मेरा मानना ​​है कि आपको डिफ़ॉल्ट के लिए सरणी तत्व को संदर्भित करने की आवश्यकता है (जब तक कि सरणी स्ट्रिंग का एक सरणी नहीं है)।

http://jsfiddle.net/FxM3B/3/

जावास्क्रिप्ट:

function AppCtrl($scope) {


    $scope.operators = [
        {value: 'eq', displayName: 'equals'},
        {value: 'neq', displayName: 'not equal'}
     ]

    $scope.filterCondition={
        operator: $scope.operators[0]
    }
}

HTML:

<body ng-app ng-controller="AppCtrl">
<div>Operator is: {{filterCondition.operator.value}}</div>
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators">
</select>
</body>

क्या आप जानते हैं कि आप क्यों और क्या हैं? प्रलेखन ( docs.angularjs.org/api/ng.directive:select ) का कहना है कि आपको गैर-स्ट्रिंग मान पर बाध्य करते समय केवल एनजी विकल्पों का उपयोग करने की आवश्यकता है। जैसा मैंने कहा कि मैं शीर्षक विशेषता का उपयोग करना चाहता हूं, और एनजी-विकल्प के साथ ऐसा करने का कोई तरीका नहीं है। कुछ इस तरह से <विकल्प शीर्षक = "इस पसंद का बहुत लंबा विवरण" ...> धन्यवाद।
चार्ल्स ओ।

मेरा मानना ​​है कि डॉक्स में नोट थोड़ा अस्पष्ट है और वास्तव में इसका मतलब है कि आपको मॉडल के लिए एक स्ट्रिंग का उपयोग करना होगा और विकल्पों के लिए स्ट्रिंग की एक सरणी होगी। यदि आपको इस बात पर कोई आपत्ति नहीं है कि "शीर्षक" विशेषता का उपयोग करने का क्या कारण है, तो मैं इसे W3C w3schools.com/tags/tag_option.asp पर नहीं देखता और वास्तव में इसका उपयोग करने की याद नहीं दिला सकता। क्या आप अभी वस्तुओं में विवरण संग्रहीत नहीं कर सकते हैं फिर भी उस डेटा को पुनः प्राप्त करते हैं क्योंकि मॉडल अब किसके लिए बाध्य है?
शौनहुसैन

आपके द्वारा लिंक किए गए W3C पृष्ठ पर, यदि आप Global Attributes लिंक पर क्लिक करते हैं, तो आप देखेंगे कि शीर्षक विशेषता विकल्प तत्व द्वारा समर्थित है। मैं केवल "टूलटिप" पाठ को प्रदर्शित करने के लिए शीर्षक विशेषता का उपयोग कर रहा हूं, ताकि यदि आप किसी विकल्प पर मंडराते हैं, तो आप इसका एक बड़ा विवरण प्राप्त कर सकते हैं कि इसका विकल्प क्या है। यह एक छोटी सी बात है, लेकिन अगर संभव हो तो अच्छा होगा।
चार्ल्स ओ।

@CharlesO। मैं बिल्कुल आपकी तरह करना चाहता हूं। ऑब्जेक्ट (गैर-स्ट्रिंग मान) सेट करें, लेकिन मैं विकल्प सूची में एक शीर्षक का उपयोग करना चाहता हूं। क्या इसका कोई समाधान है। मैं इसे खोजने के लिए प्रतीत नहीं कर सकता ...
विल्ट

1

यदि आप कोणीय सामग्री से md-select और ng-repeat ing md-option का उपयोग कर रहे हैं तो आप इस पेनng-model-options="{trackBy: '$value.id'}" में दिखाए गए md-select टैग ऐश में जोड़ सकते हैं

कोड:

<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}">
  <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label>
  <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option>
</md-select>

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.