दिलचस्प पोस्ट
क्या मैं एसक्यूएल संग्रहित प्रक्रिया में इनपुट पैरामीटर के रूप में कॉलम नाम पास कर सकता हूँ आर में एक मॉडल मैट्रिक्स में एक फैक्टर के सभी स्तर एंड्रॉइड डिवाइस का अद्वितीय आईडी कन्स्ट्रक्टर में कितना काम किया जाना चाहिए? ऐप पृष्ठभूमि में है, जबकि मैं कैसे खेलने के लिए अपने AVPlayer प्राप्त कर सकता हूं? SQLite – आप अलग-अलग डेटाबेस से तालिकाओं में कैसे शामिल हो सकते हैं? डुप्लिकेट पंक्तियों को हटाएं (सभी डुप्लिकेट हटाएं) मैं स्क्रिप्ट पथ से क्वेरी स्ट्रिंग मान कैसे प्राप्त करूं? डेटाबेस में सभी उपयोगकर्ताओं के लिए सभी अनुमतियों / एक्सेस खोजने के लिए SQL सर्वर क्वेरी स्विंग कीललाइस्टर और एक ही समय में एकाधिक कुंजी दबाई गई एंड्रॉइड एसडीके 22 – सर्चव्यू रेंडरिंग समस्याएं पूर्णांक में अंकों की संख्या निर्धारित करने के लिए कुशल तरीका स्विफ्ट: कॉल में अतिरिक्त तर्क 'त्रुटि' निष्क्रियता की अवधि के बाद आईओएस कार्यवाही करता है (कोई उपयोगकर्ता इंटरैक्शन नहीं) क्यों कुछ प्रकार के शाब्दिक संशोधक नहीं हैं

AngularJS के ng- विकल्प का उपयोग करके चयन के साथ काम करना

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

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

$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> 

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

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

वेब के समाधान से एकत्रित समाधान "AngularJS के ng- विकल्प का उपयोग करके चयन के साथ काम करना"

नोट करने के लिए एक बात यह है कि ngOodel काम करने के लिए ngOptions के लिए आवश्यक हैng-model="blah" जो "चयनित मूल्य के लिए $ scope.blah सेट करें" कह रहा है।

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

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

AngularJS के दस्तावेज़ीकरण से अधिक है (यदि आपने इसे नहीं देखा है):

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

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

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

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

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

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

 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 में $scope.selectedItem हैं। बिंदु, AngularJS के साथ, आपको अपने विकल्प टैग के बारे में चिंता करने की आवश्यकता नहीं है। AngularJS इसे संभाल दें; आपको केवल अपने दायरे में अपने मॉडल में क्या है इसके बारे में ध्यान रखना चाहिए।

यहां ऊपर दिए गए व्यवहार का प्रदर्शन करने वाला एक प्लंकर है, और एचटीएमएल को लिखा है


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

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

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

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

 <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> 

मैं 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"}; } 

किसी कारण से 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> 

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

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

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

निम्न निगोशिएशन फ़ॉर्म का उपयोग किया गया है: select as label for value in array

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

उदाहरण:

  • 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

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

 #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> 

यदि आपको प्रत्येक विकल्प के लिए एक कस्टम शीर्षक की आवश्यकता है, 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> 

मुझे आशा है कि निम्नलिखित आपके लिए काम करेंगे I

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

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

 <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> 

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

लेकिन चयनित विकल्प सेट नहीं है। अज्ञात कारणों से AngularJS छाया $ डाइजेस्ट निष्पादन में चयनित होने पर बाध्य नहीं होता क्योंकि यह होना चाहिए। मुझे चयनित करने के लिए 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); } }); }