কৌণিক জেএস ব্যবহার করে কীভাবে একটি ড্রপডাউন তালিকা নিয়ন্ত্রণের একটি নির্বাচিত বিকল্প সেট করবেন

Question

আমি কৌণিক জেএস ব্যবহার করছি এবং কৌনিক জেএস ব্যবহার করে আমার একটি ড্রপডাউন তালিকা নিয়ন্ত্রণের একটি নির্বাচিত বিকল্প সেট করা দরকার। যদি এটি হাস্যকর হয় তবে আমাকে ক্ষমা করুন তবে আমি কৌনিক জেএসের সাথে নতুন

এখানে আমার এইচটিএমএল এর ড্রপডাউন তালিকা নিয়ন্ত্রণ

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

এইচটিএমএল:

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

এটি "খ" আইটেমটি নির্বাচন করতে ছেড়ে দেবে।

Comments

আমার অর্ডার.জেএস নামে একটি কনট্রোলার ফাইল রয়েছে, এইচটিএমএল একই আদেশের নাম দেয় html যেখানে নিয়ন্ত্রণ রয়েছে। আমি কি নির্বাচিত বৈকল্পিকটি সেখানে বা সরাসরি নিয়ন্ত্রণে সেট করব?

— themhz

সাধারণত আপনি নিয়ামক মধ্যে এই জিনিসগুলি $scopeপরিবর্তনশীল উপর সেট করতে হবে । সুতরাং ধরে নিই যে আপনি একক সুযোগে রয়েছেন, আপনার নিয়ামকটিতে আপনি বলতে পারেন $scope.item.selectedVariant = 0, ডিফল্ট নির্বাচিত মান সেট করতে। আপনি এনজি-আরআর নির্দেশিকা ব্যবহার করে এইচটিএমএলে সরাসরি নিয়ন্ত্রণের উপরও পরিবর্তনশীল সেট করতে পারতেন , তবে এটি আমার মতে অদৃশ্য হয়ে যায়!

— স্টিভ ক্লিস্টার্স

variantsআপনার সুযোগ কী আছে তা আপনি বিস্তারিতভাবে বলতে পারেন ? আপনি item.selectedVariantএকটি আইটেম ঠিক সেট করতে হবে variants।

— স্টিভ ক্লিস্টার্স

$ স্কোপ.ইটিএম.স্লেক্টভেয়ারেন্ট = 0; আমি পৃষ্ঠাটি যদি

— কনট্রোলার

আপনি দয়া করে এনজি-আরএন ব্যবহার করে সিনট্যাক্স সরবরাহ করতে পারেন?

— themhz

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: সিলেক্ট করুন যা কেবলমাত্র বরাদ্দ করে ডিফল্টরূপে লাল রঙ নির্বাচন করে নির্বাচন করুন $scope.color='red'।

Comments

আমি আইটেমটি কোথায় নির্বাচিত করব? যদি আমি $ স্কোপ.ইটিএম.স্লেক্টভেয়ারেন্ট = 0 সংজ্ঞায়িত করি; ফাইলটির

— কনট্রোলারে

আপনি কি মিলে এইচটিএমএল পেস্ট করতে পারেন?

— টাদিউস ওজিকেক

আমি orderGrid মধ্যে প্রতিটি আইটেমের 0 selectedVariant সেট প্রয়োজন আছে মনে

— 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

সহজ উপায়

আপনার যদি প্রতিক্রিয়া হিসাবে কোনও ব্যবহারকারী বা কোনও অ্যারে / জেএসএন আপনার সংজ্ঞায়িত করে থাকেন তবে প্রথমে আপনাকে নির্বাচিত মানটি নিয়ামকের মধ্যে সেট করতে হবে, তারপরে আপনি একই মডেলের নামটি এইচটিএমএল এ স্থাপন করবেন। এই উদাহরণটি আমি সবচেয়ে সহজ উপায়ে ব্যাখ্যা করতে লিখেছি। কন্ট্রোলারের অভ্যন্তরে
সরল উদাহরণ
:

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

আপনার এইচটিএমএল

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

আপনার এইচটিএমএল

<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 তালিকা বিকল্পের সাহায্যে সম্পন্ন করুন। তবে নির্বাচিত বিকল্প সেট করা নেই। অজানা কারণে ছায়ায় AngularJS $ ডাইজেস্ট নির্বাহ না করে যেমন বেঁধে দেওয়া হয় ততটা বেঁধে দেওয়া হয়। আমি নির্বাচিত সেট করতে 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);

এইচটিএমএল ফাইল

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