AngularJS के एनजी विकल्पों का उपयोग करके चयन के साथ काम करना

Question

मैंने इसके बारे में अन्य पोस्ट में पढ़ा है, लेकिन मैं इसका पता नहीं लगा सका।

मेरे पास एक सरणी है,

$scope.items = [
   {ID: '000001', Title: 'Chicago'},
   {ID: '000002', Title: 'New York'},
   {ID: '000003', Title: 'Washington'},
];

मैं इसे प्रस्तुत करना चाहता हूं:

<select>
  <option value="000001">Chicago</option>
  <option value="000002">New York</option>
  <option value="000003">Washington</option>
</select>

और मैं ID = 000002 के साथ विकल्प भी चुनना चाहता हूं।

मैंने चुनिंदा पढ़ा है और कोशिश की है, लेकिन मैं इसका पता नहीं लगा सकता।

Comments

मैं Select2 का उपयोग करने की अत्यधिक सलाह देता हूं , क्योंकि यह आपके लिए इसे संभाल लेगा। यहां तक ​​कि एंगुलरजेएस के लिए एक निर्देश भी है ।

— हेलेस्टोन

github.com/angular/angular.js/issues/6564

— क्रिस्टोफ़ रूसो

वास्तव में क्वांटम्युई द्वारा विकसित एक शुद्ध एंगुलरजेएस समाधान है । आप http://quantumui.org/ पर अधिक उदाहरण और दस्तावेज पा सकते हैं ।

— रेमन Drunce

Answer 1

ध्यान देने वाली एक बात यह है कि ngModel को काम करने के लिए आवश्यक है ... ध्यान दें कि ng-model="blah"जो कह रहा है "चयनित मान के लिए $ गुंजाइश ।blah सेट करें"।

इसे इस्तेमाल करे:

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

यहाँ AngularJS के प्रलेखन से अधिक है (यदि आपने इसे नहीं देखा है):

सरणी डेटा स्रोतों के लिए:

• सरणी में मान के लिए लेबल
• सरणी में मान के लिए लेबल के रूप में चुनें
• सरणी में मान के लिए समूह द्वारा लेबल समूह = सरणी में मान के लिए समूह द्वारा लेबल समूह के रूप में चयन करें

ऑब्जेक्ट डेटा स्रोतों के लिए:

• ऑब्जेक्ट में (कुंजी, मान) के लिए लेबल
• ऑब्जेक्ट में (कुंजी, मान) के लिए लेबल के रूप में चुनें
• ऑब्जेक्ट में समूह (कुंजी, मान) के लिए समूह द्वारा लेबल करें
• ऑब्जेक्ट में समूह (कुंजी, मान) के लिए लेबल समूह के रूप में चुनें

---

AngularJS में विकल्प टैग मूल्यों पर कुछ स्पष्टीकरण के लिए:

जब आप उपयोग करते हैं ng-options, तो एनजी-ऑप्शंस द्वारा लिखे गए ऑप्शन टैग्स का मान हमेशा ऑप्शन आइटम से संबंधित ऐरे आइटम का सूचकांक होगा । ऐसा इसलिए है क्योंकि एंगुलरजेएस वास्तव में आपको चुनिंदा नियंत्रणों के साथ संपूर्ण वस्तुओं का चयन करने की अनुमति देता है, न कि केवल आदिम प्रकार के। उदाहरण के लिए:

app.controller('MainCtrl', function($scope) {
   $scope.items = [
     { id: 1, name: 'foo' },
     { id: 2, name: 'bar' },
     { id: 3, name: 'blah' }
   ];
});

<div ng-controller="MainCtrl">
   <select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
   <pre>{{selectedItem | json}}</pre>
</div>

उपरोक्त आपको $scope.selectedItemसीधे संपूर्ण ऑब्जेक्ट का चयन करने की अनुमति देगा । मुद्दा यह है, AngularJS के साथ, आपको इस बात की चिंता करने की आवश्यकता नहीं है कि आपके विकल्प टैग में क्या है। चलो AngularJS को संभालते हैं; आपको केवल इस बात का ध्यान रखना चाहिए कि आपके दायरे में आपके मॉडल में क्या है।

यहाँ ऊपर दिए गए व्यवहार को प्रदर्शित करने वाला एक प्लांटर है, और बाहर लिखा HTML दिखा रहा है

---

डिफ़ॉल्ट विकल्प से निपटना:

कुछ चीजें हैं जो मैं डिफ़ॉल्ट विकल्प से संबंधित ऊपर उल्लेख करने में विफल रहा हूं।

पहला विकल्प चुनना और खाली विकल्प हटाना:

आप ऐसा सरल जोड़कर कर सकते हैं ng-initजो ng-modelआपके दोहराए जाने वाले आइटम में पहले तत्व से मॉडल (से ) सेट करता है ng-options:

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

नोट: यह थोड़ा पागल हो सकता है अगर fooकुछ "मिथ्या" के लिए ठीक से शुरू किया जाए। उस स्थिति में, आप fooअपने नियंत्रक के आरंभ को संभालना चाहेंगे , सबसे अधिक संभावना है।

डिफ़ॉल्ट विकल्प को अनुकूलित करना:

यह थोड़ा अलग है; यहां आपको केवल अपने चयन के एक बच्चे के रूप में एक विकल्प टैग जोड़ना है, एक खाली मूल्य विशेषता के साथ, फिर उसके आंतरिक पाठ को अनुकूलित करें:

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="">Nothing selected</option>
</select>

नोट: इस मामले में "खाली" विकल्प एक अलग विकल्प चुनने के बाद भी वहां रहेगा। यह AngularJS के तहत चयन के डिफ़ॉल्ट व्यवहार के लिए मामला नहीं है।

एक स्वनिर्धारित डिफ़ॉल्ट विकल्प जो चयन के बाद छुपाता है:

यदि आप चाहते थे कि आपका स्वनिर्धारित डिफ़ॉल्ट विकल्प आपके द्वारा किसी मान का चयन करने के बाद चला जाए, तो आप अपने डिफ़ॉल्ट विकल्प में एनजी-छिपाने की विशेषता जोड़ सकते हैं:

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="" ng-if="foo">Select something to remove me.</option>
</select>

Comments

यह बताता है कि वे मानों के सूचक हैं, यह इस प्रकार है कि कोणीय आपको अपने चयनित बॉक्स के मूल्य के रूप में वस्तुओं का उपयोग करने की अनुमति दे सकता है। कोणीय आपके लिए चुनिंदा बॉक्स के साथ पर्दे के पीछे बहुत सारी चीजें कर रहा है, और आप अपने विकल्पों पर मूल्य विशेषता के बारे में चिंता करने वाले नहीं हैं।

— बेन लेश

दस्तावेज़ीकरण उनकी साइट पर "चयन" के तहत है: docs.angularjs.org/api/ng.directive:select

— बेन लैश

"... ngModel को काम करने के लिए आवश्यक है ..." मेरे लिए समस्या का मूल था। अच्छा उत्तर।

— ट्रिस्टन

क्या पहले खाली विकल्प ( <option value="?" selected="selected"></option>) से बचना संभव है ?

— 15

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

— फ्रैन हेरेरो

Answer 2

मैं AngularJS सीख रहा हूं और चयन के साथ भी संघर्ष कर रहा था। मुझे पता है कि यह सवाल पहले से ही उत्तर दिया गया है, लेकिन मैं कुछ और कोड साझा करना चाहता था।

मेरे परीक्षण में मेरे पास दो सूची बॉक्स हैं: कार बनाता है और कार मॉडल। कुछ सूची बनाने तक मॉडल सूची को अक्षम कर दिया जाता है। यदि सूची में चयन बाद में रीसेट हो जाता है ('मेक सेलेक्ट करने के लिए सेट') तो मॉडल सूची बॉक्स फिर से निष्क्रिय हो जाता है और इसका चयन भी रीसेट हो जाता है ('मॉडल का चयन करें')। झीलों को एक संसाधन के रूप में पुनः प्राप्त किया जाता है जबकि मॉडल केवल हार्ड-कोडेड होते हैं।

JSON बनाता है:

[
{"code": "0", "name": "Select Make"},
{"code": "1", "name": "Acura"},
{"code": "2", "name": "Audi"}
]

services.js:

angular.module('makeServices', ['ngResource']).
factory('Make', function($resource){
    return $resource('makes.json', {}, {
        query: {method:'GET', isArray:true}
    });
});

HTML फ़ाइल:

<div ng:controller="MakeModelCtrl">
  <div>Make</div>
  <select id="makeListBox"
      ng-model="make.selected"
      ng-options="make.code as make.name for make in makes"
      ng-change="makeChanged(make.selected)">
  </select>

  <div>Model</div>
  <select id="modelListBox"
     ng-disabled="makeNotSelected"
     ng-model="model.selected"
     ng-options="model.code as model.name for model in models">
  </select>
</div>

controllers.js:

function MakeModelCtrl($scope)
{
    $scope.makeNotSelected = true;
    $scope.make = {selected: "0"};
    $scope.makes = Make.query({}, function (makes) {
         $scope.make = {selected: makes[0].code};
    });

    $scope.makeChanged = function(selectedMakeCode) {
        $scope.makeNotSelected = !selectedMakeCode;
        if ($scope.makeNotSelected)
        {
            $scope.model = {selected: "0"};
        }
    };

    $scope.models = [
      {code:"0", name:"Select Model"},
      {code:"1", name:"Model1"},
      {code:"2", name:"Model2"}
    ];
    $scope.model = {selected: "0"};
}

Comments

प्रिय यादृच्छिक उपयोगकर्ता। हालांकि यह सवाल और इसका उत्तर नहीं है बल्कि सरल और सरल है, आपके उचित और संबंधित स्थानों में कोड का संगठन (नियंत्रक, सेवा, टेम्पलेट, डेटा) यह सरल और डिफ़ॉल्ट रूप में AngularJS की शान दिखाता है। बहुत बढ़िया उदाहरण।

— एटिकस

यह ऐसा नहीं है कि इसका उपयोग कैसे किया जाए। अपने दायरे पर किसी अन्य चर की ओर ng-modelसंकेत करना चाहिए , जिसके साथ संबंधित नहीं है । Docs.angularjs.org/api/ng/directive/ngOptions में उदाहरण देखेंmake

— दिमित्री

@DmitriZaitsev मुझे लगता है कि आप गलत हैं, सिर्फ इसलिए कि कोणीय डॉक्स उदाहरण से पता चलता है कि आपने जिस तरह से वर्णन किया है इसका मतलब यह नहीं है कि यह एकमात्र तरीका है। हमें दिखाएँ कि आपको क्यों लगता है कि इसे इस तरह से इस्तेमाल नहीं किया जाना चाहिए, न कि नए-नए उदाहरणों के लिए एक महान उदाहरण के रूप में।

— JRT

Answer 3

किसी कारण से AngularJS मुझे भ्रमित करने की अनुमति देता है। इस पर उनका प्रलेखन बहुत भयानक है। विविधताओं के अधिक अच्छे उदाहरणों का स्वागत किया जाएगा।

वैसे भी, बेन लेश के जवाब पर मेरी थोड़ी भिन्नता है।

मेरा डेटा संग्रह इस तरह दिखता है:

items =
[
   { key:"AD",value:"Andorra" }
,  { key:"AI",value:"Anguilla" }
,  { key:"AO",value:"Angola" }
 ...etc..
]

अभी

<select ng-model="countries" ng-options="item.key as item.value for item in items"></select>

फिर भी सूचकांक (0, 1, 2, आदि) होने के लिए विकल्प मूल्य में परिणाम हुआ।

ट्रैक जोड़ना मेरे लिए तय करके :

<select ng-model="blah" ng-options="item.value for item in items track by item.key"></select>

मुझे लगता है कि यह अधिक बार होता है कि आप एक चयन सूची में वस्तुओं की एक सरणी जोड़ना चाहते हैं, इसलिए मैं इसे याद करने जा रहा हूं!

ध्यान रखें कि AngularJS 1.4 से आप एनजी विकल्पों का उपयोग नहीं कर सकते हैं, लेकिन आपको ng-repeatअपने विकल्प टैग पर उपयोग करने की आवश्यकता है :

<select name="test">
   <option ng-repeat="item in items" value="{{item.key}}">{{item.value}}</option>
</select>

Comments

यह उत्तर ठीक वैसा ही प्रतीत होता है जैसा प्रश्न पूछ रहा है। हर दूसरा जवाब पाठक को बताता है कि HTML क्या है, इसकी चिंता न करें, लेकिन यदि चयनित तत्व एक रूप में है, तो मुझे बहुत चिंता है। बहुत बढ़िया जवाब!

— कीथ

यह इंगित किया जाना चाहिए कि यह मॉडल में पूर्ण चयनित वस्तु को संग्रहीत करता है, न कि केवल कुंजी को। यदि आप मॉडल में सिर्फ कुंजी चाहते हैं, तो आप "item.key as item.value" संस्करण का उपयोग करना चाहते हैं। इसने मुझे थोड़ी देर के लिए भ्रमित कर दिया क्योंकि मुझे एचटीएमएल जैसा दिख रहा था, न कि मॉडल में जो डेटा चाहिए था, जो कि मेरे लिए, महत्वपूर्ण बात है।

— mhenry1384

@ mhenry1384 हाँ, आप सही हैं, इसके बारे में यह पूरी वस्तु को संग्रहीत करता है। मुझे वास्तव में वह सुविधा पसंद है क्योंकि यह आपको केवल आईडी से अधिक की एक्सेस देता है (यदि आपको इसकी आवश्यकता है।)। मेरे लिए अच्छी तरह से काम करता है जब मैं सूचियों को witha mongo संग्रह को पॉप्युलेट करता हूं और मुझे चयनित आइटम से कुछ संपत्ति की आवश्यकता होती है।

— मैटिज

और हम अंदर "एनजी-परिवर्तन" के साथ परिवर्तनों का पता कैसे लगा सकते हैं option?

— कॉन्सटेंटिनो नैटियोस

अपडेट के संबंध में, यह सही नहीं है। एनजी-विकल्प अभी भी 1.5 में ठीक काम करता है। यह अभी भी प्रलेखन में दिखा रहा है। docs.angularjs.org/api/ng/directive/select

— जेरेमी ए। वेस्ट

Answer 4

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

बेन द्वारा सुझाए गए उदाहरण में:

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

निम्नलिखित ngOptions फॉर्म का उपयोग किया गया है select as label for value in array:।

लेबल एक अभिव्यक्ति है, जिसके परिणामस्वरूप <option>तत्व के लिए लेबल होगा । उस मामले में आप कुछ और जटिल विकल्प लेबल करने के लिए, कुछ स्ट्रिंग संयोजन कर सकते हैं।

उदाहरण:

• ng-options="item.ID as item.Title + ' - ' + item.ID for item in items" आप की तरह लेबल देता है Title - ID
• ng-options="item.ID as item.Title + ' (' + item.Title.length + ')' for item in items"आपको लेबल देता है Title (X), जहां Xशीर्षक स्ट्रिंग की लंबाई है।

आप फ़िल्टर का उपयोग भी कर सकते हैं, उदाहरण के लिए,

• ng-options="item.ID as item.Title + ' (' + (item.Title | uppercase) + ')' for item in items"आपको ऐसे लेबल देता है Title (TITLE), जहां शीर्षक संपत्ति का शीर्षक और TITLE एक ही मूल्य है, लेकिन अपरकेस वर्णों में परिवर्तित हो जाता है।
• ng-options="item.ID as item.Title + ' (' + (item.SomeDate | date) + ')' for item in items"Title (27 Sep 2015)यदि आपके मॉडल में कोई संपत्ति है, तो आप जैसे लेबल देते हैंSomeDate

Answer 5

कॉफीस्क्रिप्ट में:

#directive
app.directive('select2', ->
    templateUrl: 'partials/select.html'
    restrict: 'E'
    transclude: 1
    replace: 1
    scope:
        options: '='
        model: '='
    link: (scope, el, atr)->
        el.bind 'change', ->
            console.log this.value
            scope.model = parseInt(this.value)
            console.log scope
            scope.$apply()
)

<!-- HTML partial -->
<select>
  <option ng-repeat='o in options'
          value='{{$index}}' ng-bind='o'></option>
</select>

<!-- HTML usage -->
<select2 options='mnuOffline' model='offlinePage.toggle' ></select2>

<!-- Conclusion -->
<p>Sometimes it's much easier to create your own directive...</p>

Comments

अपने radixलिए न भूलें parseInt: http://davidwalsh.name/parseint-radix

— GFoley83

Answer 6

यदि आपको प्रत्येक विकल्प के लिए कस्टम शीर्षक की आवश्यकता है, ng-optionsतो लागू नहीं है। इसके बजाय ng-repeatविकल्पों के साथ उपयोग करें:

<select ng-model="myVariable">
  <option ng-repeat="item in items"
          value="{{item.ID}}"
          title="Custom title: {{item.Title}} [{{item.ID}}]">
       {{item.Title}}
  </option>
</select>

Answer 7

मुझे उम्मीद है कि निम्नलिखित आपके लिए काम करेंगे।

<select class="form-control"
        ng-model="selectedOption"
        ng-options="option.name + ' (' + (option.price | currency:'USD$') + ')' for option in options">
</select>

Answer 8

यह उपयोगी हो सकता है। बाइंडिंग हमेशा काम नहीं करती है।

<select id="product" class="form-control" name="product" required
        ng-model="issue.productId"
        ng-change="getProductVersions()"
        ng-options="p.id as p.shortName for p in products"></select>

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

लेकिन चयनित विकल्प सेट नहीं है। अज्ञात कारणों के लिए छाया में एंगुलरजेएस $ डाइजेस्ट निष्पादन निष्पादित नहीं होता है, जैसा कि इसे चुना जाना चाहिए। मुझे चयनित सेट करने के लिए jQuery का उपयोग करने के लिए मिला है। यह महत्वपूर्ण है! AngularJS, छाया में, एनजी-रिपीट विकल्पों द्वारा उत्पन्न एटीआर के मूल्य के लिए उपसर्ग जोड़ता है। Int के लिए यह "संख्या:" है।

$scope.issue.productId = productId;
function activate() {
    $http.get('/product/list')
       .then(function (response) {
           $scope.products = response.data;

           if (productId) {
               console.log("" + $("#product option").length);//for clarity
               $timeout(function () {
                   console.log("" + $("#product option").length);//for clarity
                   $('#product').val('number:'+productId);

               }, 200);
           }
       });
}