সাধারণ অ্যারে init সহ এনজি-বিকল্পগুলি

Question

আমি কৌণিক এবং সাথে কিছুটা বিভ্রান্ত ng-options।

আমার একটি সহজ অ্যারে আছে এবং আমি এটির সাথে একটি নির্বাচন শুরু করতে চাই। তবে, আমি সেই বিকল্পগুলি মান = লেবেল চাই।

script.js

$scope.options = ['var1', 'var2', 'var3'];

এইচটিএমএল

<select ng-model="myselect" ng-options="o for o in options"></select>

আমি যা পাই:

<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>

আমি যা চাই:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

সুতরাং আমি চেষ্টা করেছি:

<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>

<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>

(তবে এটি কার্যকর হয়নি))

সম্পাদনা:

আমার ফর্মটি বাহ্যিকভাবে জমা দেওয়া হয়েছে, এজন্য আমার 0 এর পরিবর্তে মান হিসাবে 'var1' দরকার।

Answer 1

আপনার তৃতীয় প্রয়াসে আসলে এটি সঠিক ছিল।

 <select ng-model="myselect" ng-options="o as o for o in options"></select>

এখানে একটি কার্যকারী উদাহরণ দেখুন: http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p= পূর্বরূপ

কৌশলটি হ'ল অ্যাঙ্গুলারজেএস 0 থেকে n পর্যন্ত কী হিসাবে কীগুলি লিখে রাখে এবং মডেলটি আপডেট করার সময় ফিরে অনুবাদ করে।

ফলস্বরূপ, এইচটিএমএল ভুল দেখায় তবে একটি মান চয়ন করার সময় মডেলটি এখনও সঠিকভাবে সেট করা হবে। (অর্থাত্ AngularJS '0' কে 'var1' তে অনুবাদ করবে)

এপোককের সমাধানটিও কাজ করে, তবে আপনি যদি অ্যাসিঙ্ক্রোনালি ডেটা লোড করেন তবে আপনি দেখতে পাবেন এটি সর্বদা সঠিকভাবে আপডেট হয় না। এনজিওপশনগুলি ব্যবহার করে স্কোপ পরিবর্তন হলে সঠিকভাবে রিফ্রেশ হবে।

Comments

আপনি বিষয় বন্ধ। আপনি নির্দেশাবলী বুঝতে পারেন নি। তিনি valueতার মধ্যে চান select।

— এপোককে

আমি নির্দেশাবলীটি বুঝতে পেরেছিলাম, তবে সম্ভবত তার উদ্দেশ্যটি মডেলটির সাথে 'মান' আবদ্ধ করা এবং অ্যাংুলারজেগুলি যেভাবে ট্যাগ উপস্থাপন করছে তার কারণে কী ঘটছে তা ভুল বোঝাবুঝি করছে।

— জেমস ডেভিস

আপনি এটি কাজ যদি কৌণিক সাথে মান নির্বাচন করুন, কিন্তু আমার ক্ষেত্রে (যেমন ক্লাসিক ফর্ম জমা), মান 0,1,2,3, var1 হল না, var2, var3 হতে হবে

— Dragu

আমি ধরে নিয়েছি আপনি মডেলটির সাথে আবদ্ধ হন, তবে আপনি যদি কৌণিকের সাথে বাহ্যিকভাবে জমা দেওয়া ফর্মটি রেন্ডার করতে AngularJS ব্যবহার করেন তবে এপোককের সমাধানটি ব্যবহার করুন।

— জেমস ডেভিস

এটি কি আমিই, নাকি এটি এখন পর্যন্ত সবচেয়ে জ্যাকড আপ এবং অস্পষ্ট বাক্য গঠন?

— বোকা

Answer 2

আপনি ব্যবহার করতে পারেন ng-repeatসঙ্গে optionভালো:

<form>
    <select ng-model="yourSelect" 
        ng-options="option as option for option in ['var1', 'var2', 'var3']"
        ng-init="yourSelect='var1'"></select>
    <input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>

আপনি যখন আপনার জমা দিন formআপনি লুকানো ইনপুট মান পেতে পারেন।

---

DEMO

এনজি-নির্বাচিত এনজি-রিপিট

Comments

আপনি যদি আমার উত্তরটিকে ঘৃণা করেন তবে আমার নতুন সমাধানটি পরীক্ষা করে দেখুন।

— এপোককে

Answer 3

আপনি যেমন কিছু ব্যবহার করতে পারে

<select ng-model="myselect">
    <option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
        {{o}}
    </option>
</select>

এনজি-সিলেক্টড ব্যবহার করে আপনি মাই সিলেক্টের পূর্বে নির্বাচন করা থাকলে বিকল্পটি বেছে নিয়েছেন।

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

Comments

ng-optionsঅবজেক্টের ডেটা উত্সগুলির সাথেও কাজ করে। ডকস.আঙ্গুলারজেএস.আর.পি.আই.সি.

— চার্লি শ্লিসার

যদিও অন্যরা কাজের প্রস্তাব দিয়েছে, এই সলিউশনটি এখন পর্যন্ত সবচেয়ে মার্জিত এবং পুরানো এইচটিএমএল শৈলীর নিকটবর্তী, কৌণিক মডেল বাঁধাই এবং ফর্ম সাবমাল উভয়ের সাথেই কাজ করে। ধন্যবাদ!

— ফাদি চামিহ

এনজি-নির্বাচিত হ্যান্ডেলবারগুলির প্রয়োজন হয় না কারণ এটি একটি কৌনিক নির্দেশ। দুর্দান্ত সমাধান।

— ক্যাসি স্পিকম্যান

Answer 4

আপনি যদি নীচের মত আপনার নির্বাচন সেটআপ করেন:

<select ng-model="myselect" ng-options="b for b in options track by b"></select>

তুমি পাবে:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

কাজ করা ফিডল: http://jsfiddle.net/x8kCZ/15/

Comments

এই সমাধানটি কেবলমাত্র আমার জন্য কাজ করেছিল যা স্ট্রিংগুলির একটি অ্যারেতে প্রাথমিক মান নির্বাচন করার জন্য ছিল।

— এনা

হ্যাঁ এই উত্তরটি হওয়া উচিত, ট্র্যাকটি আমার জন্য যাদু করে।

— গার্নার্ড

আমি উপরের সমাধানগুলি অনুসরণ করার পরে কমপক্ষে প্রত্যাশা করছিলাম তবে এটি ছিল সহজ উপায়

— 6'16

Answer 5

<select ng-model="option" ng-options="o for o in options">

$ সুযোগ.অপশন পরিবর্তনের পরে 'var1' সমান হবে, এমনকি আপনি উত্পন্ন এইচটিএমএলতে মান = "0" দেখতে পাবেন

plunker