कोणीय जेएस का उपयोग करके ड्रॉपडाउन सूची नियंत्रण का एक चयनित विकल्प कैसे सेट करें

Question

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

यहाँ मेरे html की ड्रॉपडाउन सूची नियंत्रण है

 <select ng-required="item.id==8 && item.quantity > 0" name="posterVariants"
   ng-show="item.id==8" ng-model="item.selectedVariant" 
   ng-change="calculateServicesSubTotal(item)"
   ng-options="v.name for v in variants | filter:{type:2}">
  </select>

इसके बाद मैं आबाद हो जाता हूं

 <select ng-options="v.name for v in variants | filter:{type:2}" ng-change="calculateServicesSubTotal(item)"
ng-model="item.selectedVariant" ng-show="item.id==8" name="posterVariants"
ng-required="item.id==8 &amp;&amp; item.quantity &gt; 0" class="ng-pristine ng-valid ng-valid-required">
    <option value="?" selected="selected"></option>
    <option value="0">set of 6 traits</option>
    <option value="1">5 complete sets</option>
</select>

मैं value="0"चयनित होने के लिए नियंत्रण कैसे सेट कर सकता हूं ?

Comments

<option value="0" ng-selected="true">set of 6 traits</option>

— मुहम्मद शहजाद

Answer 1

मुझे आशा है कि मैं आपके प्रश्न को ng-modelसमझूंगा , लेकिन निर्देशन नियंत्रण में चयनित वस्तु और मूल्य के बीच दो-तरफा बंधन बनाता है item.selectedVariant। इसका मतलब है कि item.selectedVariantजावास्क्रिप्ट में परिवर्तन , या नियंत्रण में मूल्य को बदलना, दूसरे को अपडेट करता है। यदि item.selectedVariantका मान है 0, तो उस आइटम का चयन किया जाना चाहिए।

यदि variantsवस्तुओं का एक सरणी है, तो item.selectedVariantउन वस्तुओं में से एक पर सेट होना चाहिए। मुझे नहीं पता कि आपके दायरे में कौन सी जानकारी है, लेकिन यहाँ एक उदाहरण है:

जे एस:

$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
$scope.selectedOption = $scope.options[1];

HTML:

<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>

इससे "b" आइटम का चयन किया जाएगा।

Comments

मेरे पास एक कंट्रोलर फ़ाइल है, जिसका नाम order.js है, इस प्रकार html उसी क्रम का नाम है जहाँ नियंत्रण है। क्या मुझे चयनित वेरिएंट को वहां या सीधे नियंत्रण पर सेट करना चाहिए?

— थीहज जूल

आमतौर पर आप इन चीजों को कंट्रोलर में, $scopeवैरिएबल पर सेट करेंगे । इसलिए मान लें कि आप एक एकल दायरे में हैं, अपने नियंत्रक में आप कह सकते हैं $scope.item.selectedVariant = 0, डिफ़ॉल्ट चयनित मान सेट करने के लिए। आप एनजी-इनटी डायरेक्टिव का उपयोग करके, चर को सीधे HTML में भी सेट कर सकते हैं , लेकिन यह मेरी राय में गड़बड़ है!

— स्टीव क्लास्टर्स

क्या आप इस बारे में विस्तार से बता सकते हैं कि variantsआपके दायरे में क्या है? आपको item.selectedVariantएक आइटम के लिए बिल्कुल सेट करना होगा variants।

— स्टीव क्लोस्टर्स

$ स्कोप.मिट.सेलेक्टेड वेरिएंट = 0; अगर मैं इसे

— कंट्रोलर

कृपया आप एनजी-इनिट का उपयोग करके सिंटैक्स प्रदान कर सकते हैं?

— थीम्ज़ जूल

Answer 2

मुझे नहीं पता कि इससे किसी को मदद मिलेगी या नहीं, लेकिन जैसा कि मैं एक ही मुद्दे का सामना कर रहा था मैंने साझा करने के बारे में सोचा कि मुझे समाधान कैसे मिला।

आप अपने में विशेषता द्वारा ट्रैक का उपयोग कर सकते हैं ng-options।

मान लें कि आपके पास:

variants:[{'id':0, name:'set of 6 traits'}, {'id':1, name:'5 complete sets'}]

आप अपने के ng-optionsरूप में उल्लेख कर सकते हैं :

ng-options="v.name for v in variants track by v.id"

आशा है कि यह भविष्य में किसी की मदद करेगा।

Comments

हाँ! आखिरकार! धन्यवाद

— davaus

महान। मैं गतिशील रूप से ऐसा करने के लिए ट्रैक को याद कर रहा था।

— जॉन

आखिरकार! द्वारा ट्रैक डालकर मेरी समस्या हल की गई। धन्यवाद

— किशन

यह वही है जो मुझे याद आ रहा था! मैं गुंजाइश क्षेत्र स्थापित कर रहा था जो ngModelठीक से बंधा हुआ था , लेकिन जब तक मैंने जोड़ा नहीं, तब तक यह काम नहीं करता था track by! धन्यवाद!

— सिंडी के।

Answer 3

यदि आप मान 0 असाइन करते हैं, तो item.selectedVariantइसे स्वचालित रूप से चुना जाना चाहिए। Http://docs.angularjs.org/api/ng.directive:select पर नमूना देखें, जो केवल असाइन करके डिफ़ॉल्ट रूप से लाल रंग का चयन करता है $scope.color='red'।

Comments

मैं आइटम कहां सेट कर सकता हूं। अगर मैं $ स्कोप को परिभाषित करता हूं। item.selectedVariant = 0; फ़ाइल के

— नियन्त्रक में

क्या आप HTML मिलान भी पेस्ट कर सकते हैं?

— तदेउस्ज़ वोजिक

मुझे लगता है कि क्रम में प्रत्येक आइटम के लिए चयनित वैरिएंट को 0 पर सेट करने की आवश्यकता होती है

— Tadeusz Wójcik

आप एक नमूना कोड प्रदान कर सकते हैं? मैं कोणीय खेद के साथ परिचित नहीं हूँ

— themhz

Answer 4

मैं यहाँ देख रहा हूँ कि पहले से ही अच्छे उत्तर लिखे गए हैं, लेकिन कभी-कभी इसे दूसरे रूप में लिखने में मदद मिल सकती है

<div ng-app ng-controller="MyCtrl">
  <select ng-model="referral.organization" ng-options="c for c in organizations"></select>
</div>

<script type='text/javascript'>
  function MyCtrl($scope) {
    $scope.organizations = ['a', 'b', 'c', 'd', 'e'];
    $scope.referral = {
      organization: $scope.organizations[2]
    };
  }
</script>

Comments

क्या होगा अगर मेरे पास एक ड्रॉप डाउन था जो मल्टी सेलेक्ट था। बस मॉडल में आईडी सेट करना काम नहीं कर रहा है

— निखिल साहू

Answer 5

सरल तरीका

यदि आपके पास प्रतिक्रिया या एक एरियर / JSON के रूप में उपयोगकर्ता हैं, तो पहले आपको नियंत्रक में चयनित मान सेट करने की आवश्यकता है, फिर आप उसी मॉडल का नाम html में रखें। यह उदाहरण मैंने सबसे आसान तरीके से समझाने के लिए लिखा था। नियंत्रक के अंदर
सरल उदाहरण
:

$scope.Users = ["Suresh","Mahesh","Ramesh"]; 
$scope.selectedUser = $scope.Users[0];

आपका HTML

<select data-ng-options="usr for usr in Users" data-ng-model="selectedUser">
</select>

नियंत्रक के अंदर जटिल उदाहरण :

$scope.JSON = {
       "ResponseObject":
           [{
               "Name": "Suresh",
               "userID": 1
           },
           {
               "Name": "Mahesh",
               "userID": 2
           }]
   };
   $scope.selectedUser = $scope.JSON.ResponseObject[0];

आपका HTML

<select data-ng-options="usr.Name for usr in JSON.ResponseObject" data-ng-model="selectedUser"></select>
<h3>You selected: {{selectedUser.Name}}</h3>    

Answer 6

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

<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 सूची विकल्प के साथ बाकी अनुरोध को निष्पादित करने के बाद किया जाना चाहिए। लेकिन चयनित विकल्प सेट नहीं है। अज्ञात कारणों से छाया में एंगुलरजेएस $ डाइजेस्ट निष्पादित नहीं करते हैं, क्योंकि यह शुल्ड नहीं होता है। मैं चयनित सेट करने के लिए JQuery का उपयोग करेगा। यह महत्वपूर्ण है! छाया में कोणीय एनजी-रिपीट ऑप्टिनो द्वारा उत्पन्न एटीआर के मूल्य के लिए उपसर्ग जोड़ते हैं। 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);
               //$scope.issue.productId = productId;//not work at all
           }, 200);
       }
   });
}

Answer 7

निम्नलिखित आज़माएँ:

जेएस फाइल

this.options = { 
        languages: [{language: 'English', lg:'en'}, {language:'German', lg:'de'}]
};
console.log(signinDetails.language);

HTML फ़ाइल

<div class="form-group col-sm-6">
    <label>Preferred language</label>
    <select class="form-control" name="right" ng-model="signinDetails.language" ng-init="signinDetails.language = options.languages[0]" ng-options="l as l.language for l in options.languages"><option></option>
    </select>
</div>

Comments

पहले से ही एक अच्छा समाधान है, यह काम करता है और ओपी द्वारा स्वीकार किया गया है कि यह उनके मुद्दे को हल करता है।

— एल। गुथर्ट

Answer 8

यह वह कोड है जिसे मैंने सेट चयनित मान के लिए उपयोग किया है

countryList: any = [{ "value": "AF", "group": "A", "text": "Afghanistan"}, { "value": "AL", "group": "A", "text": "Albania"}, { "value": "DZ", "group": "A", "text": "Algeria"}, { "value": "AD", "group": "A", "text": "Andorra"}, { "value": "AO", "group": "A", "text": "Angola"}, { "value": "AR", "group": "A", "text": "Argentina"}, { "value": "AM", "group": "A", "text": "Armenia"}, { "value": "AW", "group": "A", "text": "Aruba"}, { "value": "AU", "group": "A", "text": "Australia"}, { "value": "AT", "group": "A", "text": "Austria"}, { "value": "AZ", "group": "A", "text": "Azerbaijan"}];
 
 
 for (var j = 0; j < countryList.length; j++) {
      //debugger
      if (countryList[j].text == "Australia") {
          console.log(countryList[j].text); 
          countryList[j].isSelected = 'selected';
      }
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<label>Country</label>
<select class="custom-select col-12" id="Country" name="Country"   >
<option value="0" selected>Choose...</option>
<option *ngFor="let country of countryList" value="{{country.text}}" selected="{{country.isSelected}}"   > {{country.text}}</option>
</select>

कोणीय ढांचे पर यह प्रयास करें

Answer 9

जे एस:

$scope.options = [
  {
    name: "a", 
    id: 1 
  },
  {
    name: "b",
    id: 2 
  }
];
$scope.selectedOption = $scope.options[1];