অ্যাঙ্গুলারজেএস এর এনজি-অপশন ব্যবহার করে নির্বাচন করে কাজ করা

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>

এবং আমি আইডি = 000002 সহ বিকল্পটি নির্বাচন করতে চাই।

আমি সিলেক্ট পড়ে দেখেছি এবং চেষ্টা করেছি, কিন্তু আমি তা বের করতে পারি না।

Comments

আমি সलेक्ट 2 ব্যবহারের জন্য অত্যন্ত পরামর্শ দিচ্ছি , কারণ এটি আপনার পক্ষে এটি পরিচালনা করবে। এমনকি AngularJS এর ​​জন্য একটি নির্দেশিকা রয়েছে ।

— হুস্টোন

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

— ক্রিস্টোফ রাউসি

আসলে কোয়ান্টামইউআই দ্বারা নির্মিত একটি খাঁটি AngularJS সমাধান রয়েছে । আপনি http://quantumui.org/ এ আরও উদাহরণ এবং নথিপত্র পেতে পারেন ।

— রামন ড্রোনস

Answer 1

একটি বিষয় লক্ষণীয় যে এনজিওডশনগুলি কাজ করার জন্য এনজিমোডেল প্রয়োজন ... নোটটি নোট করুন ng-model="blah"যা নির্বাচিত মানকে "সেট $ সুযোগ.ব্লাহ" বলছে।

এটা চেষ্টা কর:

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

অ্যাংুলারজেএস এর ডকুমেন্টেশন থেকে এখানে আরও কিছু রয়েছে (যদি আপনি এটি না দেখে থাকেন):

অ্যারের ডেটা উত্সগুলির জন্য:

• অ্যারে মান জন্য লেবেল
• অ্যারেতে মান হিসাবে লেবেল হিসাবে নির্বাচন করুন
• অ্যারেতে গ্রুপের জন্য লেবেল গ্রুপ = অ্যারেতে মানের জন্য গ্রুপ দ্বারা লেবেল গ্রুপ হিসাবে নির্বাচন করুন

অবজেক্ট ডেটা উত্সের জন্য:

• অবজেক্টে (কী, মান) জন্য লেবেল
• অবজেক্টে (কী, মান) জন্য লেবেল হিসাবে নির্বাচন করুন
• বস্তুতে (কী, মান) জন্য গ্রুপ দ্বারা লেবেল গ্রুপ
• অবজেক্টে (কী, মান) জন্য গ্রুপ দ্বারা লেবেল গ্রুপ হিসাবে নির্বাচন করুন

---

অ্যাঙ্গুলারজেএস-এ বিকল্প ট্যাগ মান সম্পর্কে কিছু স্পষ্টতার জন্য:

আপনি যখন ব্যবহার করবেন 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 হ্যান্ডেল করা যাক; আপনার ক্ষেত্রের মধ্যে আপনার মডেলটিতে কী আছে তা কেবল আপনার যত্ন নেওয়া উচিত।

এখানে একজন প্লঙ্কার উপরে বর্ণনামূলক আচরণ প্রদর্শন করছে এবং এইচটিএমএল লিখিত আছে দেখিয়েছে

---

ডিফল্ট বিকল্পটি দিয়ে কাজ করা:

আমি ডিফল্ট বিকল্পের সাথে সম্পর্কিত উপরে কিছু উল্লেখ করতে ব্যর্থ হয়েছি।

প্রথম বিকল্পটি নির্বাচন করা এবং খালি বিকল্পটি সরানো:

আপনি পুনরাবৃত্তি হওয়া আইটেমগুলির মধ্যে প্রথম উপাদানটিতে 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

দেখা যাচ্ছে যে সেগুলি মানগুলির সূচক, এইভাবে কৌনিক আপনাকে আপনার নির্বাচিত বাক্সের মান হিসাবে অবজেক্টগুলি ব্যবহার করতে দেয় allow কৌণিক আপনার জন্য নির্বাচিত বাক্সগুলির সাথে পর্দার পিছনে প্রচুর পরিমাণে কাজ করছে এবং আপনি আপনার বিকল্পগুলির মান বৈশিষ্ট্য সম্পর্কে উদ্বিগ্ন হবেন না।

— বেন লেশ

ডকুমেন্টেশনগুলি তাদের সাইটে "নির্বাচন করুন" এর অধীনে রয়েছে: ডকস.আঙ্গুলারজেএস.আর.আইপিআই

— বেন লেশ

"... এনজিওডিশনগুলি এনজিওশনগুলির কাজ করার জন্য আবশ্যক ..." আমার পক্ষে সমস্যার উত্স ছিল। ভাল উত্তর.

— ত্রিস্তম

প্রথম ফাঁকা বিকল্প ( <option value="?" selected="selected"></option>) এড়ানো কি সম্ভব ?

— swenedo

আমি শেষ কেসটি ব্যবহার করার চেষ্টা করছি ( একটি কাস্টমাইজড ডিফল্ট বিকল্প যা একটি নির্বাচন হওয়ার পরে লুকায় ) তবে আমি কিছু সমস্যা পেয়েছি। পরিবর্তে ng-if="foo"আমাকে ng-if=!fooঅন্যান্য বিকল্প নির্বাচন করা হলে ডিফল্ট খালি বিকল্পটি আড়াল করতে ব্যবহার করতে হয়েছিল। এছাড়াও, কম্বো তালিকার নীচে সর্বদা ডিফল্ট খালি বিকল্প উপস্থিত থাকে। কম্বো তালিকার শুরুতে আমি এটি কীভাবে রাখতে পারি?

— ফ্রাঙ্ক হেরেরো

Answer 2

আমি অ্যাঙ্গুলারজেএস শিখছি এবং নির্বাচনের সাথেও লড়াই করে যাচ্ছিলাম। আমি জানি এই প্রশ্নের উত্তর ইতিমধ্যে দেওয়া হয়েছে, তবে তবুও আমি আরও কিছু কোড ভাগ করতে চেয়েছিলাম।

আমার পরীক্ষায় আমার দুটি তালিকা বাক্স রয়েছে: গাড়ি তৈরি এবং গাড়ির মডেল। কিছু মেক নির্বাচন না করা অবধি মডেলগুলির তালিকা অক্ষম থাকবে। যদি মেকস তালিকা বাক্সে নির্বাচনগুলি পরে পুনরায় সেট করা হয় ('মেক নির্বাচন করুন' তে সেট করা থাকে) তবে মডেলগুলির তালিকা বাক্স আবার অক্ষম হয়ে যায় এবং এর নির্বাচনটি পুনরায় সেট করা হয় ('নির্বাচিত মডেলকে')। মডেলগুলি কেবল হার্ড-কোডড থাকা অবস্থায় মেকগুলি একটি সংস্থান হিসাবে পুনরুদ্ধার করা হয়।

জেএসএন তৈরি করে:

[
{"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}
    });
});

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

<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

প্রিয় এলোমেলো ব্যবহারকারী। যদিও এই প্রশ্নটি এবং এর উত্তরটি বরং সহজ এবং জটিল, আপনার কোডের সংগঠনটিকে তার যথাযথ এবং সম্পর্কিত অবস্থানগুলিতে (নিয়ামক, পরিষেবা, টেমপ্লেট, ডেটা) এঙ্গুলারজেসের কমনীয়তাটি সহজ এবং ডিফল্ট আকারে দেখায়। দারুণ উদাহরণ।

— এটিকাস

এটি ব্যবহার করার অর্থ কী তা নয়। ng-modelএর সাথে সম্পর্কিত নয়, আপনার সুযোগে অন্য পরিবর্তনশীলকে নির্দেশ করা উচিত make। ডকস.আঙ্গুলারজেএস.আর.পি.আই

— দিমিত্রি

@ দিমিত্রিজাইটসেভ আমার মনে হয় আপনি ভুল হয়ে গেছেন, কারণ কৌনিক ডক্স উদাহরণটি আপনার বর্ণনার উপায়ে এটি দেখায় এটির একমাত্র উপায় নয় এর অর্থ এটি নয়। নবাবিদের জন্য দুর্দান্ত উদাহরণ জড়ানোর চেয়ে কেন আপনি মনে করেন যে এটি এভাবে ব্যবহার করা উচিত নয় তা আমাদের দেখান।

— জেআরটি

Answer 3

কোনও কারণে অ্যাংুলারজেএস আমাকে বিভ্রান্ত করতে দেয়। তাদের ডকুমেন্টেশন এটি বেশ ভয়ঙ্কর। পরিবর্তনের আরও ভাল উদাহরণ স্বাগত জানানো হবে।

যাইহোক, বেন লেশের উত্তর সম্পর্কে আমার কিছুটা ভিন্নতা আছে।

আমার ডেটা সংগ্রহগুলি এর মতো দেখাচ্ছে:

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

এই উত্তরটি প্রশ্নটি যা চাইছে ঠিক তাই বলে মনে হচ্ছে। অন্য প্রতিটি উত্তর পাঠককে বলে যে এইচটিএমএল কী উত্পন্ন হয় তা চিন্তা না করে তবে যদি নির্বাচিত উপাদানটি কোনও ফর্মে থাকে তবে আমি খুব চিন্তিত হই। দুর্দান্ত উত্তর!

— কীথ

এটি নির্দেশ করা উচিত যে এটি কেবলমাত্র নয়, মডেলটিতে পূর্ণ নির্বাচিত বস্তু সঞ্চয় করে। আপনি যদি মডেলটিতে কেবল কীটি চান তবে আপনি "আইটেম.কি হিসাবে আইটেম.কিউ" সংস্করণটি ব্যবহার করতে চান। এইচটিএমএল দেখতে কেমন লাগছিল, তাতে মডেলটিতে যে ডেটা চেয়েছিলাম তা নয়, যা আমার কাছে গুরুত্বপূর্ণ বিষয়, তা না করে আমি এই মুহুর্তের জন্য আমাকে বিভ্রান্ত করেছিলাম।

— mhenry1384

@ mhenry1384 হ্যাঁ আপনি ঠিক বলেছেন, এটি পুরো বিষয়টি সংরক্ষণ করে। আমি আসলে সেই বৈশিষ্ট্যটি পছন্দ করি কারণ এটি আপনাকে কেবল আইডির চেয়ে বেশি অ্যাক্সেস দেয় (যদি আপনার এটির প্রয়োজন হয়।) আমি যখন উইথ মঙ্গো সংগ্রহের তালিকা তৈরি করি তখন আমার পক্ষে ভাল কাজ করে এবং নির্বাচিত আইটেম থেকে আমার কিছু সম্পত্তি প্রয়োজন।

— ম্যাটিজস

এবং কীভাবে আমরা "এনজি-চেঞ্জ" ভিতরে পরিবর্তনগুলি সনাক্ত করতে পারি 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)যেখানে আপনাকে এমন লেবেল দেয় givesX

আপনি ফিল্টারগুলিও ব্যবহার করতে পারেন, উদাহরণস্বরূপ,

• 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 পরিষেবা থেকে বিকল্প তালিকা উত্স মডেল পূরণ করুন। তালিকাটি পূরণের আগে একটি নির্বাচিত মান জানা ছিল এবং এটি সেট করা হয়েছিল। ST http দিয়ে REST অনুরোধটি কার্যকর করার পরে, তালিকা বিকল্পটি সম্পন্ন হয়।

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

               }, 200);
           }
       });
}