অ্যাঙ্গুলারজেএস'র এনজি-বিকল্পগুলিতে আমি কীভাবে মান সম্পত্তি সেট করব?

Question

এখানে অনেক লোককে (আমাকে সহ) বিরক্ত করছে বলে মনে হচ্ছে।

ng-optionsকোনও <select>ট্যাগের বিকল্পগুলি পূরণ করার জন্য অ্যাঙ্গুলারজেএস- এ নির্দেশিকাটি ব্যবহার করার সময় , কোনও বিকল্পের জন্য মানটি কীভাবে সেট করা যায় তা আমি বুঝতে পারি না। এর জন্য ডকুমেন্টেশনটি সত্যই অস্পষ্ট - কমপক্ষে আমার মতো সিম্পলটনের জন্য।

আমি সহজেই এর মতো বিকল্পের জন্য পাঠ্যটি সেট করতে পারি:

ng-options="select p.text for p in resultOptions"

যখন resultOptionsউদাহরণস্বরূপ হল:

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

বিকল্প মানগুলি সেট করার জন্য এটি সবচেয়ে সহজ জিনিস (এবং সম্ভবত এটিই হওয়া উচিত) তবে এখন পর্যন্ত আমি এটি পাই না।

Comments

একই সমস্যা ছিল কারণ আমি দস্তাবেজগুলি খুব স্পষ্টরূপে খুঁজে পেলাম না shown

— বেনভিডস

প্রশ্নটিতে যেমন চিত্রিত করা হয়েছে তেমন "নির্বাচন করুন" এর ব্যবহারটি মূলত ভুল, কারণ এই প্রসঙ্গে "নির্বাচন করুন" কোনও মূলশব্দ নয়, তবে এটি একটি অভিব্যক্তির জন্য স্থানধারক। এটি AngularJS এর ​​ডকুমেন্টেশন থেকে: "নির্বাচন করুন: এই অভিব্যক্তিটির ফলাফলটি মূল উপাদানটির মডেলের সাথে আবদ্ধ হবে specified নির্দিষ্ট না করা থাকলে, নির্বাচনটি এক্সপ্রেশনটি মান হিসাবে ডিফল্ট হবে" " আমি নীচে আমার উত্তরে আরও বিশদ সরবরাহ করেছি।

— মজিক্স

আমার জন্য এটি সেরা উত্তর। stackoverflow.com/questions/12139152/…

— সঞ্জয়

দ্রষ্টব্য: এনজি-বিকল্পগুলির কাজ করার জন্য, এনজি-মডেল বাধ্যতামূলক !!!!!!!!! সূত্র: stackoverflow.com/a/13049740/234110

— আনন্দ Rockzz

stackoverflow.com/questions/18615624/…

— শাফকাত আলী

Answer 1

এনজিওপশন দেখুন

ngOptions (alচ্ছিক) - { comprehension_expression=} - নিম্নলিখিত ফর্মগুলির একটিতে:

অ্যারে ডেটা উত্সগুলির জন্য : label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr অবজেক্টের ডেটা উত্সগুলির জন্য: label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

আপনার ক্ষেত্রে এটি হওয়া উচিত

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

হালনাগাদ

অ্যাঙ্গুলারজেএস-এর আপডেটের সাহায্যে এক্সপ্রেশন সহ উপাদানটির valueবৈশিষ্ট্যের জন্য প্রকৃত মান সেট করা সম্ভব ।selecttrack by

<select ng-options="obj.text for obj in array track by obj.value">
</select>

কীভাবে এই কুশ্রী জিনিস মনে রাখবেন

এই সিনট্যাক্স ফর্মটি মনে রাখার জন্য যে সমস্ত লোকদের খুব কষ্ট হচ্ছে তাদের পক্ষে: আমি সম্মতি জানাই এটি সবচেয়ে সহজ বা সুন্দর সিনট্যাক্স নয়। এই সিনট্যাক্সটি পাইথনের তালিকার উপলব্ধিগুলির বর্ধিত সংস্করণ এবং এটি জানার ফলে সিন্টেক্সটি খুব সহজেই স্মরণে রাখতে সহায়তা করে। এটি এমন কিছু:

পাইথন কোড:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

এটি আসলে উপরে তালিকাভুক্ত প্রথমটির মতো একই বাক্য গঠন। যাইহোক, <select>আমাদের সাধারণত কোডের আসল মান এবং একটি <select>উপাদানটিতে প্রদর্শিত পাঠ্য (লেবেল) এর মধ্যে পার্থক্য করতে হয় ।

মত, আমাদের person.idকোড দরকার , তবে আমরা idব্যবহারকারীর কাছে এটি প্রদর্শন করতে চাই না ; আমরা এর নামটি দেখাতে চাই তেমনি, আমরা কোডটিতে আগ্রহী নই person.name। asলেবেল স্টাফ কীওয়ার্ড আসে । সুতরাং এটি এর মতো হয়ে যায়:

person.id as person.name for person in people

অথবা এর পরিবর্তে person.idআমাদের personনিজেরাই উদাহরণ / রেফারেন্সের প্রয়োজন হতে পারে । নিচে দেখ:

person as person.name for person in people

জাভাস্ক্রিপ্ট অবজেক্টের জন্য একই পদ্ধতিটি প্রযোজ্য। কেবল মনে রাখবেন যে বস্তুর আইটেমগুলি (key, value)জোড়া দিয়ে ডিকনস্ট্রাক্ট করা হয়েছে ।

Comments

আপনার উদাহরণ বিকল্পের মান বৈশিষ্ট্য পূরণ করে না। এটি << নির্বাচন> উপাদানের মডেলটিতে কী সংরক্ষণ করা হবে তা নির্ধারণ করে। আপত্তি.এলটি.ওজেক্ট.অ্যাটেক্সট এবং আপজ

— আর্টেম

অদ্ভুত তবে আমি ক্রোম এবং এফএফে <অপশন মান = "0"> প্রথম </ translation>, <বিকল্প মান = "1"> ২ য় </ translation>

— আর্টেম আন্দ্রেভ

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

— উমুর কনটাসে

আমি আলাদা করতে অনুরোধ। অভ্যন্তরীণভাবে নির্বাচিত নির্দেশিকাটি সহজেই তার নিজের অদৃশ্য মডেলটি ব্যবহার করতে পারে কোন বিকল্প নির্বাচন করা হয়েছে তা ট্র্যাক করতে। এমনকি যদি এটি অভ্যন্তরীণরূপে মডেলটির মান ট্র্যাক না করে তবে এটি কমপক্ষে বিকল্পগুলি রেন্ডার করতে পারে এবং খালি বিকল্পটি পুনঃনির্ধারণ এবং নির্বাচন করতে পারে (আপনি যদি বিকল্পটিতে সেট না করে মডেলটিকে সেট করে থাকেন তবে এটি এখন এমন আচরণ যা) । বিকল্পগুলি দেখানোর জন্য একমাত্র নির্ভরতা হ'ল বিকল্পগুলি - তারা এখানে নীতি প্রয়োগ করে।

— এজেকিয়েল ভিক্টর

উত্তর সরবরাহ না করে কেন এই উত্তরের এত বেশি ভোট রয়েছে? frm.adiputra এর উত্তরটি সঠিক।

— Noishe

Answer 2

মান বৈশিষ্ট্যগুলি কীভাবে এর মান পায়:

• ডেটাসোর্স হিসাবে কোনও অ্যারে ব্যবহার করার সময়, এটি প্রতিটি পুনরাবৃত্তিতে অ্যারের উপাদানটির সূচক হবে;
• কোনও বস্তুকে ডেটাসোর্স হিসাবে ব্যবহার করার সময়, এটি প্রতিটি পুনরাবৃত্তির সম্পত্তি নাম হবে।

সুতরাং আপনার ক্ষেত্রে এটি হওয়া উচিত:

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

Comments

অ্যাঙ্গুলার কীভাবে বিকল্প উপাদানগুলির মান বৈশিষ্ট্য সেট করে তা ব্যাখ্যা করার জন্য +1।

— রাজকোক

এটি কোনও মান সেট করে না। সংখ্যায় মানগুলি ডিফল্ট। তবে আপনি আসলে কোনও "মান" উল্লেখ করতে পারবেন না .. দ্বিধাগ্রস্ত ..

— ট্রিপ

@ ট্রিপ, আপনি যদি নির্বাচিত বিকল্পগুলি 'পরীক্ষা' করেন তবে আপনি সংখ্যা দেখতে পাবেন, তবে আপনি যদি মডেলটির সীমাবদ্ধ মানটি দেখেন তবে মানটি এই ক্ষেত্রে 'কে' মান is এটা বিভ্রান্তিকর. blesh একটি সজোরে আঘাত আছে এই উত্তর শো এই: stackoverflow.com/questions/13047923/... plnkr.co/edit/vJOljg?p=preview

— TsenYing

এটি কৌনিক নথিতে সংক্ষিপ্ত এবং সুনির্দিষ্টভাবে অন্তর্ভুক্ত করা উচিত। +1

— ডেভ্রিক

এটি আমার জন্য কাজ করা একমাত্র সমাধান। কি বাজে মাথা ব্যথা।

— জন

Answer 3

আমি এই সমস্যা ছিল। আমি এনজি-বিকল্পগুলিতে আমার মান সেট করতে সক্ষম হইনি। উত্পন্ন প্রতিটি বিকল্প 0, 1, ..., এন দিয়ে সেট করা হয়েছিল।

এটি সঠিক করার জন্য, আমি আমার এনজি-বিকল্পগুলিতে এরকম কিছু করেছি:

এইচটিএমএল:

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

আমি আমার সমস্ত মান সেট করে "ট্র্যাক বাই" ব্যবহার করি room.price।

(এই উদাহরণটি সফল হয়: কারণ যদি একাধিক দাম সমান হত তবে কোডটি ব্যর্থ হবে So তাই আলাদা আলাদা মান রয়েছে তা নিশ্চিত হয়ে নিন))

তাদেরকে JSON:

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

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

ভিডিওটি দেখুন। এটি একটি দুর্দান্ত বর্গ :)

Comments

এটি পুরোপুরি কাজ করে। এর শীর্ষে, এটি একটি অন্তর্ভুক্ত <সিলেক্ট> সহ একটি ডালালিস্ট উপাদান ব্যবহার করার অনুমতি দেয় যাতে ডেটালালিস্ট তাদের মানটির মাধ্যমে বিকল্পগুলি উল্লেখ করতে পারে। আপনাকে ধন্যবাদ ব্রুনো গোমেস

— ই

এটি আমার জন্য একমাত্র সমাধান যা কাজ করে। ধন্যবাদ।

— নাইনার

অ্যারে / অবজেক্টের সাথে ম্যাচ করার জন্য অপশন বাক্সের মান সহ এনজি-বিকল্পগুলির পক্ষে এটি সবচেয়ে উপযুক্ত উত্তর । যদি পুরষ্কারের বিনিময় ব্যবস্থা থাকে তবে আমি প্রত্যেকের দিন বাঁচানোর জন্য আপনাকে 10000 পয়েন্ট দিতাম । কৌণিক দল থেকে বেশিরভাগ উদ্ভট সিনট্যাক্স।

— ওয়েবব্লভার

ধন্যবাদ! এতদিন হতাশাব্যঞ্জক!

— শন থম্পসন

আমি আশা করি ঘরের দামগুলি কখনই এক রকম হয় না, কারণ এর পরে এটি ব্রেক হয়ে যায়।

— নীলস্কেপ

Answer 4

যদি আপনি আপনার optionউপাদানগুলির মান পরিবর্তন করতে চান কারণ ফর্মটি শেষ পর্যন্ত এটি না করে সার্ভারে জমা দেওয়া হবে,

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

তুমি এটি করতে পারো:

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

প্রত্যাশিত মানটি ফর্মের মাধ্যমে সঠিক নামের অধীনে প্রেরণ করা হবে।

Comments

আমি এটি যুক্ত করব, ব্যবহারের পরিবর্তে <input type="hidden" name="text" value="{{ text }}" />, আমি ব্যবহার করব ng-value। তাই: <input type="hidden" name="text" ng-value="{{ text }}" />।

— ড্যান অ্যাটকিনসন

আমার ক্ষেত্রে স্পষ্ট করতে আমি জসন পোস্ট ব্যবহার করে অ্যাংুলারের মাধ্যমে ফর্মটি জমা দিচ্ছি না - বরং আমি সাধারণত পোস্ট পোস্ট ব্যবহার করে ফর্মটি জমা দিচ্ছি, সুতরাং কৌণিক <ptions> ট্যাগে যে মানগুলি রাখে তা আমাকে সঠিক জমা দেওয়ার অনুমতি দেয় মান (ধন্যবাদ!) লুকানো ইনপুটটিতে আমার এনজিও-মান ব্যবহার করার দরকার নেই, বরং মূল পোস্ট নোট হিসাবে মান ট্যাগটি সেট করা দরকার।

— ফায়ারড্রাগন

Answer 5

my_heroএকটি সাধারণ ফর্ম জমা ব্যবহার করে সার্ভারে ডাকা একটি কাস্টম মান পাঠাতে :

তাদেরকে JSON:

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

এইচটিএমএল:

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

সার্ভার পাবেন পারেন ironবা superএর মান হিসাবে my_hero।

এটি @ নিমিজির উত্তরের মতো , তবে valueবৈশিষ্ট্যের জন্য পৃথক ডেটা নির্দিষ্ট করে ।

Answer 6

এটি ng-optionsব্যবহার করা জটিল (সম্ভবত হতাশাব্যঞ্জক) বলে মনে হচ্ছে তবে বাস্তবে আমাদের একটি আর্কিটেকচার সমস্যা রয়েছে।

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

• কিভাবে একটি ক্যোয়ারী সারি ব্যবহারকারীকে উপস্থাপন করা হয় (v) iew উদ্বিগ্নতা তুলে ধরে এবং ng-optionsউপলব্ধ forশব্দ নির্দেশ কি বিকল্প উপাদান বিষয়বস্তু হওয়া উচিত অর্থাত p.text for p in resultOptions ।
• সার্ভারের কাছে একটি নির্বাচিত সারিটি কীভাবে উপস্থাপন করা হয় তা (এম) ওডেলের উদ্বেগ। অতএব মডেল হিসাবে হিসাবে হিসাবে মান প্রদান করা হয় তা নির্দিষ্ট ng-optionsকরতে asকীওয়ার্ড সরবরাহ করে k as v for (k,v) in objects।

সমস্যাটির সঠিক সমাধানটি হ'ল প্রকৃতিতে স্থিতিস্থাপক এবং এটি আপনার এইচটিএমএলকে রিফ্যাক্টরিংয়ের সাথে জড়িত যাতে যাতে প্রয়োজন হয় (এম) ওডেল সার্ভারের যোগাযোগ সম্পাদন করে (ব্যবহারকারী কোনও ফর্ম জমা দেওয়ার পরিবর্তে)।

যদি কোনও এমভিসি এইচটিএমএল পৃষ্ঠা হস্তান্তরিত সমস্যার জন্য অপ্রয়োজনীয় ওভার ইঞ্জিনিয়ারিং হয়: তবে কেবলমাত্র এঙ্গুলারজেএস (ভি) ভিউ উপাদানটির এইচটিএমএল প্রজন্মের অংশটি ব্যবহার করুন। এই ক্ষেত্রে, একই প্যাটার্নটি অনুসরণ করুন যা উপাদানগুলির যেমন <li />'এর অধীনে <ul />' উপাদান তৈরি করতে ব্যবহৃত হয় এবং কোনও বিকল্প উপাদানটিতে এনজি-রিপিট রাখুন:

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

কুলডেজ হিসাবে , একটি সর্বদা নির্বাচিত উপাদানটির নাম বৈশিষ্ট্যটি একটি লুকানো ইনপুট উপাদানটিতে স্থানান্তর করতে পারে:

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

Comments

খারাপ পারফরম্যান্স যখন কোনও বিকল্প উপাদানটিতে এনজি-রিপিট ব্যবহার করছেন, সম্ভবত? আপনি সিলেক্টে এনজি-অপশন ব্যবহার করার কথা।

— DrCord

@ ডিসকর্ড: বিকল্প উপাদানটিতে এনজি-রিপিট ব্যবহার কেবলমাত্র বিচ্ছিন্ন ক্ষেত্রে (যখন কোনও উপযুক্ত এমভিসি এইচটিএমএল পৃষ্ঠাগুলি অপ্রয়োজনীয় ওভার ইঞ্জিনিয়ারিং হয়) সমাধান হিসাবে দেওয়া হয়। হয়তো ডাউনভোটার খুব কাছ থেকে এটি প্রস্তুত করেনি। এটি আরও সুনির্দিষ্টভাবে কল করার জন্য সম্পাদনা করা হবে যে বিকল্প উপাদানের উপর এনজি-রিপিট আদর্শ ক্ষেত্রে নয়।

— জোশকডস

একটি কৌণিক N00b হিসাবে আমি এই সমাধানটি নির্বাচন করতাম কারণ প্রথম নজরে এটি একটি সুষ্ঠু পরামর্শ এবং সম্ভবত কাজ করার মতো দেখাচ্ছে। অন্যান্য উত্তরে প্রস্তাবিত বাক্য বিন্যাসটি হ'ল কমপক্ষে, উদ্ভট - যদিও অনেকগুলি পছন্দের মধ্যে একটি কাজ করেও। এটি একটি বৈধ সমাধান এবং এটি যদি অকালীন অপটিমাইজেশন এড়িয়ে যায় তবে তা ঠিক আছে। ডাউন ভোটিংয়ের অর্থ হ'ল বোঝা যাচ্ছে।

— ইয়ান লুইস

এটি AngularJS ওয়েবসাইটে এটি যা বলেছে: docs.angularjs.org/api/ng/directive/select । "Note: ngOptions provides an iterator facility for the <option> element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can only be bound to string values at present."। পারফরম্যান্সের কোনও উল্লেখ নেই, কেবলমাত্র এনজিওপশনগুলি এনজিপিপিটের বিকল্প is

— ইয়ান লুইস

@ ইয়ানলিউস, ধন্যবাদ, এটি উপলব্ধি করে। এনজিআরপিট <বি> লিগের ট্যাগের চেয়ে আনবাউন্ড সিলেক্টের বিকল্পগুলিতে কেন কম পারফরম্যান্ট হবে তা আমার কাছে কোনও ধারণা দেয়নি।

— জোশকোডস

Answer 7

তুমি এটি করতে পারো:

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

-- হালনাগাদ

কিছু আপডেটের পরে, ব্যবহারকারী frm.adiputra এর সমাধান অনেক ভাল। কোড:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

Comments

নির্বাচিত উপাদান / নির্দেশকের অভ্যন্তরে এনজি-বিকল্পগুলি ব্যবহার করা ভাল। উদাহরণস্বরূপ, <এনজি-মডেল = "মডেল" এনজি-অপশনগুলি = "অ্যজেজেজেজেজেজ জন্য আইজেক্ট.ইনাম হিসাবে আইজেক্ট.আইড" নির্বাচন করুন ">। আপনার কী কাজ করে তবে এটি অন্যান্য কৌণিক নির্মাণের সাথে কাজ করবে না। উদাহরণস্বরূপ, এই এনজি-ক্লিকগুলি আপনার কোডের সাথে কাজ করবে না: <a ng-click="model=1"> 1 </a> নির্বাচন করুন, তবে এনজি-বিকল্পগুলি ব্যবহার করা হলে এটি কাজ করে।

— রাজকোক

এইভাবে এটি করার কারণে আমি কেবল একটি অদ্ভুত বাগ প্রদর্শন করেছি। প্রচুর বেদনাযুক্ত অনুসন্ধান আমাকে এনজি-বিকল্পগুলির সন্ধানে নিয়ে আসে এবং বাগটি অদৃশ্য হয়ে যায়। এনজি-মডেলটির জন্য বিকল্পগুলির মান বৈশিষ্ট্যটি সংখ্যাসূচক এবং 0 থেকে আরোহণের প্রয়োজন বলে মনে হচ্ছে আপনি যদি এনজি-পুনরাবৃত্তি এবং <বিকল্প> ট্যাগ ব্যবহার করে মানটিকে একটি অ-সংখ্যা সূচকতে পরিবর্তন করেন তবে মডেলটিতে পরিবর্তনগুলি সর্বদা হয় না নির্বাচন বাক্সে প্রতিফলিত করুন।

— Noishe

Answer 8

আমি আজ কিছু সময়ের জন্য এই সমস্যাটির সাথে লড়াই করেছি। আমি অ্যাংুলারজেএস ডকুমেন্টেশনের মাধ্যমে এটি এবং অন্যান্য পোস্টগুলি এবং কয়েকটি ব্লগের দিকে নিয়েছি। তারা সবাই আমাকে সূক্ষ্ম বিবরণে সাহায্য করতে সাহায্য করেছিল, তবে শেষ পর্যন্ত এটি কেবল একটি বিভ্রান্তিকর বিষয় বলে মনে হচ্ছে। মূলত এর অনেকগুলি সিন্ট্যাক্টিকাল সূক্ষ্মতার কারণে ng-options।

শেষ পর্যন্ত, আমার জন্য, এটি কম এসেছিল আরও বেশি।

নিম্নলিখিত হিসাবে কনফিগার করা একটি সুযোগ দেওয়া:

        //Data used to populate the dropdown list
        $scope.list = [
           {"FirmnessID":1,"Description":"Soft","Value":1},         
           {"FirmnessID":2,"Description":"Medium-Soft","Value":2},
           {"FirmnessID":3,"Description":"Medium","Value":3}, 
           {"FirmnessID":4,"Description":"Firm","Value":4},     
           {"FirmnessID":5,"Description":"Very Firm","Value":5}];

        //A record or row of data that is to be save to our data store.
        //FirmnessID is a foreign key to the list specified above.
        $scope.rec = {
           "id": 1,
           "FirmnessID": 2
        };

কাঙ্ক্ষিত ফলাফল পেতে আমার এটাই দরকার:

        <select ng-model="rec.FirmnessID"
                ng-options="g.FirmnessID as g.Description for g in list">
            <option></option>
        </select>   

নোটিশ আমি ব্যবহার করিনি track by। track byনির্বাচিত আইটেমটি ব্যবহার করে ঠিকই ফার্মেনআইডের চেয়ে ফর্মনেসআইডি-র সাথে মেলে এমন বস্তুটি ফিরে আসবে। এটি এখন আমার মাপদণ্ডগুলি পূরণ করে, এটি হ'ল এটির পরিবর্তে কোনও বস্তুর পরিবর্তে একটি সংখ্যার মানটি ফিরিয়ে নেওয়া উচিত এবং ng-optionsউত্পন্ন প্রতিটি বিকল্পের জন্য একটি নতুন সুযোগ তৈরি না করে এটি সরবরাহ করে এমন পারফরম্যান্স উন্নতি অর্জন করতে ব্যবহার করা উচিত।

এছাড়াও, আমি ফাঁকা প্রথম সারিতে, তাই আমি সহজভাবে একটি যোগ প্রয়োজন <option>থেকে <select>উপাদান।

এখানে একটি Plunkr যা আমার কাজ দেখায়।

Comments

লেজেন্ড। এটাই আমার দরকার ছিল। আপনাকে ধন্যবাদ

— Kildareflare

দুর্দান্ত, তবে "মান" কীগুলির উদ্দেশ্য কী? এগুলি প্রয়োজনীয় বলে মনে হয় না।

— mhenry1384

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

— জেফ্রি এ। গোচিন

Answer 9

নতুন 'ট্র্যাক বাই বাই' বৈশিষ্ট্যটি ব্যবহার না করে আপনি মানগুলি পাঠ্যের মতো হতে চাইলে আপনি কেবল অ্যারে দিয়ে এটি করতে পারেন:

<select ng-options="v as v for (k,v) in Array/Obj"></select>

স্ট্যান্ডার্ড সিনট্যাক্সের মধ্যে পার্থক্যটি নোট করুন, যা মান / বস্তুর অ্যারের কীগুলি তৈরি করবে, এবং সেইজন্য 0,1,2 ইত্যাদির জন্য:

<select ng-options"k as v for (k,v) in Array/Obj"></select>

k as v হয়ে যায় v হিসাবে v ।

সিনট্যাক্সের দিকে তাকানো সাধারণ জ্ঞানের ভিত্তিতে আমি এটি আবিষ্কার করেছি। (কে, ভি) হ'ল আসল বিবৃতি যা অ্যারে / অবজেক্টকে মূল মান জোড়ায় বিভক্ত করে।

'K as v' স্টেটমেন্টে k এর মান হবে এবং v টি ব্যবহারকারীর কাছে প্রদর্শিত টেক্সট অপশন হবে। আমি মনে করি 'ট্র্যাক বাই' অগোছালো এবং অতিমাত্রায়।

Comments

Waaaaat? আমার পৃষ্ঠাগুলির সমস্ত জায়গায় অ্যারেগুলির জন্য কাজ করে, আমরা কি AngularJS এর ​​একই সংস্করণটি ব্যবহার করছি?

— KthProg

Answer 10

এটি আমার মতে সমস্ত পরিস্থিতিতে উপযুক্ত ছিল:

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</select>

যেখানে আপনি ডেটা বাঁধতে আপনার মডেলটি ব্যবহার করতে পারেন। আপনি অবজেক্টটি অন্তর্ভুক্ত হিসাবে মান এবং আপনার দৃশ্যের উপর ভিত্তি করে ডিফল্ট নির্বাচন পাবেন।

Comments

এই সমাধান ভালবাসা। এই নির্দেশের জন্য তাদের কৌণিক সহায়কগুলি অহেতুক জটিল। ব্যবহারের স্বঘোষিত বিচারক হওয়ার জন্য ধন্যবাদ।

— ডেভিড মেলিন

Answer 11

এভাবেই সমাধান করেছি। আমি নির্বাচন করে মান দ্বারা ট্র্যাক করেছি এবং নির্বাচিত আইটেমের সম্পত্তিটি আমার জাভাস্ক্রিপ্ট কোডের মডেলটিতে সেট করেছি।

Countries =
[
    {
        CountryId = 1, Code = 'USA', CountryName = 'United States of America'
    },
    {
       CountryId = 2, Code = 'CAN', CountryName = 'Canada'
    }
]

<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">

vmআমার নিয়ামক এবং পরিষেবা থেকে পুনরুদ্ধার করা নিয়ন্ত্রকের দেশ {CountryId =1, Code = 'USA', CountryName='United States of America'}।

আমি যখন নির্বাচিত ড্রপডাউন থেকে অন্য দেশটি নির্বাচন করেছি এবং "পৃষ্ঠাগুলি সংরক্ষণ করুন" দিয়ে আমার পৃষ্ঠা পোস্ট করেছি, তখন আমি সঠিক দেশটি সীমাবদ্ধ পেয়েছি।

Answer 12

ng-optionsডিরেক্টিভের উপর মান অ্যাট্রিবিউট সেট করেনি <options>অ্যারে জন্য উপাদান:

ব্যবহারের limit.value as limit.text for limit in limitsঅর্থ:

নির্বাচনের মধ্যে মানটি সংরক্ষণ করে <option>'এর লেবেল সেট করুনlimit.text
limit.valueng-model

ওভারফ্লো প্রশ্ন স্ট্যাক দেখুন AngularJS এনজি-বিকল্পগুলি রেন্ডারিং মানগুলি না ।

Answer 13

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>

Answer 14

আপনি মূল্য নির্বাচন এবং সদস্যদের ট্যাগ বাঁধাই করতে এনজি-বিকল্পগুলি ব্যবহার করতে পারেন

এই তথ্য উত্স ব্যবহার করার সময়

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

আপনি আপনার নির্বাচিত ট্যাগকে মান এবং নামের সাথে যুক্ত করতে নীচেরটি ব্যবহার করতে পারেন

<select name="text" ng-model="name" ng-options="c.key as c.name for c in countries"></select>

এটা দুর্দান্ত কাজ করে

Comments

স্ট্যাকওভারফ্লো একটি নিখরচায় কোড লেখার পরিষেবা the এই ভুল ধারণাটি এড়াতে দয়া করে কিছু ব্যাখ্যা দিয়ে আপনার কোড-উত্তরটি বাড়িয়ে নিন।

— Yunnosch

Answer 15

এই প্রশ্নের সঠিক উত্তরটি ব্যবহারকারী frm.adiputra দ্বারা সরবরাহ করেছেন , কারণ বর্তমানে বিকল্প উপাদানগুলির মান বৈশিষ্ট্য স্পষ্টভাবে নিয়ন্ত্রণ করার একমাত্র উপায় বলে মনে হয়।

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

নির্বাচনের হিসাবে এটি ব্যবহার হিসাবে প্রশ্নটিতে বর্ণিত হয়েছে:

ng-options='select p.text for p  in resultOptions'

মূলত ভুল।

এক্সপ্রেশনগুলির তালিকার উপর ভিত্তি করে, মনে হয় যে ট্র্যাকেক্সপ্রস মান নির্দিষ্ট করতে ব্যবহৃত হতে পারে, যখন বিকল্পগুলির একটি অ্যারেতে বিকল্প দেওয়া হয়, তবে এটি কেবল গ্রুপিংয়ের সাথেই ব্যবহৃত হয়।

---

এনজিও-অপশনগুলির জন্য অ্যাঙ্গুলারজেএস'র ডকুমেন্টেশন থেকে:

• অ্যারে / অবজেক্ট : একটি অভিব্যক্তি যা পুনরাবৃত্তি করতে অ্যারে / অবজেক্টকে মূল্যায়ন করে।
• মান : স্থানীয় পরিবর্তনশীল যা পুনরাবৃত্তির সময় অ্যারের প্রতিটি আইটেম বা অবজেক্টের প্রতিটি সম্পত্তি মানের উল্লেখ করবে।
• কী : স্থানীয় পরিবর্তনশীল যা পুনরাবৃত্তির সময় অবজেক্টে কোনও সম্পত্তির নাম উল্লেখ করবে।
• লেবেল : এই অভিব্যক্তিটির ফলাফলটি উপাদানটির জন্য লেবেল হবে। অভিব্যক্তিটি সম্ভবত মান ভেরিয়েবল (উদাহরণস্বরূপ value.propertyName) উল্লেখ করবে।
• নির্বাচন করুন : এই অভিব্যক্তিটির ফলাফলটি মূল উপাদানটির মডেলের সাথে আবদ্ধ থাকবে। যদি নির্দিষ্ট না করা হয় তবে সিলেক্ট এক্সপ্রেশনটি ডিফল্ট হবে।
• গোষ্ঠী : এই অভিব্যক্তিটির ফলাফলটি ডিওএম উপাদান ব্যবহার করে গ্রুপ বিকল্পগুলিতে ব্যবহৃত হবে।
• ট্রেকেক্সপ্রস : অবজেক্টগুলির একটি অ্যারের সাথে কাজ করার সময় ব্যবহৃত হয়। এই অভিব্যক্তিটির ফলাফল অ্যারেতে থাকা জিনিসগুলি সনাক্ত করতে ব্যবহৃত হবে। ট্রেকেক্সপ্রস সম্ভবত মান ভেরিয়েবল (উদাহরণস্বরূপ value.propertyName) উল্লেখ করবে।

Answer 16

এনজি-অপশনগুলিতে কোনও আইটেম নির্বাচন করা আপনার কীভাবে ডেটা উত্স সেট করবেন তার উপর নির্ভর করে কিছুটা জটিল হতে পারে।

তাদের সাথে কিছুক্ষণ লড়াই করার পরে আমি ব্যবহার করি এমন সাধারণ তথ্য উত্সগুলির সাথে একটি নমুনা তৈরি শেষ করেছি। আপনি এখানে পেতে পারেন:

http://plnkr.co/edit/fGq2PM?p=preview

এখন এনজি-বিকল্পগুলি কাজ করতে, এখানে কিছু বিষয় বিবেচনা করার জন্য রয়েছে:

1. সাধারণত আপনি একটি উত্স থেকে অপশন এবং অন্য থেকে নির্বাচিত মান পাবেন। উদাহরণ স্বরূপ:
   • এনজি-বিকল্পগুলির জন্য :: :: ডেটা
   • user.state :: অপশনটি নির্বাচিত হিসাবে সেট করুন
2. 1 এর উপর ভিত্তি করে, সবচেয়ে সহজ / লজিক্যাল কাজটি হ'ল নির্বাচনকে একটি উত্স দিয়ে পূরণ করা এবং তারপরে নির্বাচিত মান ট্রুট কোড সেট করা। খুব কমই মিশ্র ডেটাসেট পাওয়া ভাল।
3. AngularJS নির্বাচন করা নিয়ন্ত্রণগুলি আরও বেশি ধরে রাখতে অনুমতি দেয় key | label। অনেক অনলাইন উদাহরণ বস্তুগুলিকে 'কী' হিসাবে রাখে এবং আপনার যদি প্রয়োজন হয় তবে অবজেক্টের কোনও তথ্য সেভাবে সেট করুন, অন্যথায় আপনার প্রয়োজনীয় সম্পত্তি কী হিসাবে ব্যবহার করুন। (আইডি, কোড, ইত্যাদি। প্ল্যাকার নমুনার মতো)

4. ড্রপডাউন / নির্বাচন নিয়ন্ত্রণের মান নির্ধারণের উপায় # 3, উপর নির্ভর করে

   • যদি ড্রপডাউন কীটি একক সম্পত্তি হয় (প্লামকারের সমস্ত উদাহরণের মতো), আপনি কেবল এটি সেট করুন, উদাহরণস্বরূপ: $scope.dropdownmodel = $scope.user.state;

   • আপনি যদি বিষয়টিকে কী হিসাবে সেট করেন, আপনাকে অপশনগুলি লুপ করতে হবে, এমনকি বস্তুটি বরাদ্দকরণের ফলে আইটেমটি নির্বাচিত হিসাবে সেট করা হবে না কারণ তাদের বিভিন্ন হ্যাশকি থাকবে, যেমন:

     for (var i = 0, len = $scope.options.length; i < len; i++) {
       if ($scope.options[i].id == savedValue) { // Your own property here:
         console.log('Found target! ');
         $scope.value = $scope.options[i];
         break;
       }
     }

আপনি একই বস্তুর জন্য অন্য বস্তুর জন্য সেভডভ্যালু প্রতিস্থাপন করতে পারেন $scope.myObject.myProperty,।

Comments

এক বছর পরে, আমি প্লাঙ্কার নমুনার জন্য আপনাকে ধন্যবাদ। খুব দরকারী.

— বব.মাজজো

Answer 17

আমার জন্য ব্রুনো গোমেসের উত্তর সবচেয়ে ভাল উত্তর।

তবে প্রকৃতপক্ষে, আপনাকে নির্বাচিত বিকল্পগুলির মান সম্পত্তি নির্ধারণ সম্পর্কে চিন্তা করার দরকার নেই। অ্যাঙ্গুলারজেএস সেটির যত্ন নেবে। আমাকে বিস্তারিতভাবে বলি।

দয়া করে এই কোলাহলটি বিবেচনা করুন

angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {

    $scope.timeFormatTemplates = [{
        label: "Seconds",
        value: 'ss'
    }, {
        label: "Minutes",
        value: 'mm'
    }, {
        label: "Hours",
        value: 'hh'
    }];


    $scope.inactivity_settings = {
        status: false,
        inactive_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.activity_settings = {
        status: false,
        active_time: 60 * 5 * 3, // 15 min (default value), that is,  900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.changedTimeFormat = function (time_format) {
        'use strict';

        console.log('time changed');
        console.log(time_format);
        var newValue = time_format.value;

        // do your update settings stuffs
    }
});

আপনি যেমন ফিডাল আউটপুটে দেখতে পাচ্ছেন, আপনি নির্বাচিত বাক্স বিকল্পগুলির জন্য যা কিছু চয়ন করুন না কেন এটি আপনার কাস্টম মান, বা অ্যাঙ্গুলারজেএস দ্বারা 0, 1, 2 স্বয়ংক্রিয়ভাবে উত্পন্ন মান, আপনি jQuery বা অন্য কোনও ব্যবহার না করে এটি আপনার আউটপুটে কোনও বিষয় নয় unless অন্যান্য লাইব্রেরি সেই নির্বাচন করা কম্বো বাক্স বিকল্পগুলির মান অ্যাক্সেস করতে এবং সেই অনুসারে এটিকে ম্যানিপুলেট করে।

Answer 18

প্রশ্নের এক বছর পরে, আমাকে এই প্রশ্নের উত্তর খুঁজে পেতে হয়েছিল কারণ এগুলির মধ্যে না হলেও প্রকৃত উত্তরটি আমাকে দেওয়া হয়েছিল, কমপক্ষে আমার কাছে।

আপনি কীভাবে বিকল্পটি নির্বাচন করবেন তা জিজ্ঞাসা করেছেন, তবে কেউই বলেনি যে এই দুটি জিনিস এক নয় :

আমাদের যদি এর মতো বিকল্প থাকে:

$scope.options = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];

এবং আমরা এটির মতো একটি ডিফল্ট বিকল্প সেট করার চেষ্টা করি:

$scope.incorrectlySelected = { label: 'two', value: 2 };

এটি কাজ করবে না , তবে আপনি যদি এই বিকল্পটি নির্বাচন করার চেষ্টা করেন:

$scope.correctlySelected = $scope.options[1];

এটা কাজ করবে ।

যদিও এই দুটি অবজেক্টের একই বৈশিষ্ট্য রয়েছে, AngularJS এগুলিকে আলাদা হিসাবে বিবেচনা করছে কারণ AngularJS রেফারেন্সের সাথে তুলনা করে ।

ফিজলটি একবার দেখুন http://jsfiddle.net/qWzTb/ ।

Answer 19

সম্পত্তি হিসাবে ট্র্যাক ব্যবহার করুন যা নির্বাচিত বাক্সে মান এবং লেবেলকে পৃথক করে।

চেষ্টা করুন

<select ng-options="obj.text for obj in array track by obj.value"></select>

যা পাঠ্যের সাথে লেবেল এবং মান সহ মান নির্ধারণ করবে (অ্যারে থেকে)

Answer 20

একটি বস্তুর জন্য:

<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>

Answer 21

এটি এনজি-বিকল্পগুলির সাথে বিকাশকারীদের পক্ষে সর্বদা বেদনাদায়ক। উদাহরণস্বরূপ: নির্বাচিত ট্যাগটিতে একটি খালি / ফাঁকা নির্বাচিত মান পাওয়া। বিশেষত এনজি-অপশনগুলিতে জেএসএন বস্তুর সাথে কাজ করার সময়, এটি আরও ক্লান্তিকর হয়ে ওঠে। এখানে আমি এটি সম্পর্কে কিছু অনুশীলন করেছি।

উদ্দেশ্য: NG- বিকল্পের মাধ্যমে JSON অবজেক্টের অ্যারে Iterate এবং নির্বাচিত প্রথম উপাদান সেট করুন set

ডেটা:

someNames = [{"id":"1", "someName":"xyz"}, {"id":"2", "someName":"abc"}]

সিলেক্ট ট্যাগে আমাকে xyz এবং abc দেখাতে হয়েছিল, যেখানে অনেক চেষ্টা ছাড়াই xyz নির্বাচন করতে হবে।

এইচটিএমএল:

<pre class="default prettyprint prettyprinted" style=""><code>
    &lt;select class="form-control" name="test" style="width:160px"    ng-options="name.someName for name in someNames" ng-model="testModel.test" ng-selected = "testModel.test = testModel.test || someNames[0]"&gt;
&lt;/select&gt;
</code></pre>

উপরের কোডের নমুনা দ্বারা, আপনি এই অতিরঞ্জিত থেকে বেরিয়ে যেতে পারেন।

অন্য উল্লেখ :

Answer 22

টিউটোরিয়াল আঙ্গুলার.জেএস: এনজি-সিলেক্ট এবং এনজি-বিকল্পগুলি আমাকে সমস্যার সমাধান করতে সহায়তা করেছে:

<select id="countryId"
  class="form-control"
  data-ng-model="entity.countryId"
  ng-options="value.dataValue as value.dataText group by value.group for value in countries"></select>

Comments

লিঙ্কের জন্য ধন্যবাদ।

— পিএইচপিস্টে

Answer 23

<select ng-model="output">
   <option ng-repeat="(key,val) in dictionary" value="{{key}}">{{val}}</option>
</select>

Comments

এনজিওশনগুলি প্রতিটি সুবিধা পুনরুদ্ধারের জন্য নতুন সুযোগ তৈরি না করে মেমরি হ্রাস এবং গতি বাড়ানোর মতো কিছু সুবিধা দেয়, দেখুন: ডকস.আঙ্গুলারজ.স.আর

— আইপি

Answer 24

কোড স্নিপেট চালান এবং বিভিন্নতা দেখুন। দ্রুত বোঝার জন্য এখানে নোট

1. উদাহরণ 1 (অবজেক্ট নির্বাচন): - ng-option="os.name for os in osList track by os.id"। এখানে track by os.idগুরুত্বপূর্ণ & হওয়া উচিত সেখানে os.id as করা উচিত নয় আগে আছে os.name।

   • ng-model="my_os"যেমন কী দিয়ে একটি বস্তু সেট করা উচিত আইডি মত my_os={id: 2}।

2. উদাহরণ 2 (মান নির্বাচন): - ng-option="os.id as os.name for os in osList"। এখানে সেখানে track by os.id থাকা উচিত নয় এবং আগে os.id as থাকা উচিতos.name ।

   • ng-model="my_os"মত কোনো মানে সেট করা উচিতmy_os= 2

বিশ্রাম কোড স্নিপেট ব্যাখ্যা করবে।

angular.module('app', []).controller('ctrl', function($scope, $timeout){
  
  //************ EXAMPLE 1 *******************
  $scope.osList =[
    { id: 1, name :'iOS'},
    { id: 2, name :'Android'},
    { id: 3, name :'Windows'}
  ]
  $scope.my_os = {id: 2};
  
  
  //************ EXAMPLE 2 *******************
  $timeout(function(){
    $scope.siteList = [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo'},
          { id: 3, name: 'Bing'}
        ];
   }, 1000);
    
    $scope.my_site = 2;
  
    $timeout(function(){
      $scope.my_site = 3;
    }, 2000);
})

fieldset{
  margin-bottom: 40px;
  }
strong{
  color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <!--//************ EXAMPLE 1 *******************-->
  <fieldset>
    <legend>Example 1 (Set selection as <strong>object</strong>)</legend>
    
    <select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
        <option value="">--Select--</option>
      </select>
    {{my_os}}
    
  </fieldset>
  
  
  <!--//************ EXAMPLE 2 *******************-->
  <fieldset>
    <legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
      <select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
        <option value="">--Select--</option>
      </select>
      {{my_site}}
  </fieldset>
  
</div>

Answer 25

অনেকের আগে যেমন বলেছিল, আমার কাছে যদি ডেটা কিছু থাকে তবে:

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

আমি এটি ব্যবহার করব:

<select
    ng-model="selectedCountry"
    ng-options="obj.name for obj  in countries">
</select>

আপনার কন্ট্রোলারে আপনাকে প্রথম খালি আইটেমটি থেকে মুক্তি পেতে প্রাথমিক মান নির্ধারণ করতে হবে:

 $scope.selectedCountry = $scope.countries[0];

 // You need to watch changes to get selected value
 $scope.$watchCollection(function() {
   return $scope.selectedCountry
 }, function(newVal, oldVal) {
     if (newVal === oldVal) {
       console.log("nothing has changed " + $scope.selectedCountry)
     } 
     else {
       console.log('new value ' + $scope.selectedCountry)
     }
 }, true)

Answer 26

উত্তরাধিকারের আবেদনে আমি কীভাবে এই সমস্যাটি সমাধান করব:

এইচটিএমএলে:

ng-options="kitType.name for kitType in vm.kitTypes track by kitType.id" ng-model="vm.itemTypeId"

জাভাস্ক্রিপ্টে:

vm.kitTypes = [
    {"id": "1", "name": "Virtual"},
    {"id": "2", "name": "Physical"},
    {"id": "3", "name": "Hybrid"}
];

...

vm.itemTypeId = vm.kitTypes.filter(function(value, index, array){
    return value.id === (vm.itemTypeId || 1);
})[0];

আমার এইচটিএমএল অপশন মানটি সঠিকভাবে প্রদর্শন করে।

Answer 27

এনজিওপশনস নির্দেশনা:

$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];

• কেস -১) অ্যারেতে মানের জন্য লেবেল:

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <p> age of selected item is : {{selectedItem.age}} </p>
      <select ng-model="selectedItem" ng-options="item.name for item in items">
      </select>
  </div>

আউটপুট ব্যাখ্যা (অনুমান 1 ম আইটেম নির্বাচিত):

নির্বাচিত আইটেম = {নাম: 'এ', বয়স: ২০} // [ডিফল্টরূপে, নির্বাচিত আইটেমটি মান আইটেমের সমান ]

নির্বাচিত আইটেম.ইজ = 20

• কেস -২) অ্যারেতে মান হিসাবে লেবেল হিসাবে নির্বাচন করুন:

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <select ng-model="selectedItem" ng-options="item.age as item.name for item in items">
      </select>
  </div>

আউটপুট ব্যাখ্যা (অনুমান 1 ম আইটেম নির্বাচিত): নির্বাচিত আইটেম = 20 // [নির্বাচন অংশ আইটেম.ইজ ]