অ্যাঙ্গুলার ব্যবহার করে কীভাবে একটি ড্রপডাউন বক্স তৈরি করবেন?

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

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

কৌণিক কী?


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



জবা বাইনারি থেকে দশমিক

ড্রপডাউন বক্স কী?

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

বিকল্প 1 বিকল্প 2 বিকল্প 3

অবশ্যই, উপরের কোডটির প্রত্যাশিত আচরণের জন্য তার নির্দিষ্ট জাভাস্ক্রিপ্টের প্রয়োজন হবে তবে ড্রপডাউন মেনুর মূল কঙ্কালটি একই রয়েছে remains আসুন আমরা এখন কৌণিক কীভাবে এটি করি তা দেখুন।

কৌণিক ব্যবহার করে ড্রপডাউন বক্স

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

পদ্ধতি 1: এনজি-বিকল্পগুলি ব্যবহার করে একটি ড্রপডাউন তালিকা তৈরি করা

আপনি এনজি-বিকল্পগুলি ব্যবহার করতে পারেন অ্যারে বা আইটেমের তালিকা থেকে একটি ড্রপডাউন মেনু তৈরি করতে।

var অ্যাপ্লিকেশন = কৌণিক.মডিউল ('ডেমো', []) অ্যাপকন্ট্রোলার ('মাইসিটিআরএল', ফাংশন ($ স্কোপ) {$ স্কোপ.নেমস = ['দেমাভান্দ', 'প্রদীপ', 'আশুতোষ']})

পদ্ধতি 2: এনজি-রিপিট ব্যবহার করে একটি ড্রপডাউন তালিকা তৈরি করা

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

এই নির্দিষ্ট কোড স্নিপেট এনজি-রিপিট ব্যবহার করে একই তালিকা প্রয়োগ করে

{{নাম}} var অ্যাপ্লিকেশন = কৌণিক.মডিউল ('ডেমো', []) app.controller ('myCtrl', ফাংশন ($ সুযোগ) {$ স্কোপ.নেমস = ['দেমাভান্দ', 'প্রদীপ', 'আশুতোষ' ]})

এটি আমাদের পরিবর্তে এই ছোট ব্লগ 'কৌণিক ব্যবহার করে ড্রপডাউন তালিকা' এর শেষে নিয়ে আসে to আমি আশা করি আপনার নিজের প্রকল্পে আপনি কীভাবে একটি ড্রপডাউন মেনু বাস্তবায়ন করতে পারেন সে সম্পর্কে আপনার ধারণা রয়েছে have এই ব্লগটি সম্পর্কে আপনার যদি সন্দেহ থাকে তবে নীচের মন্তব্য বিভাগে মন্তব্য হিসাবে পোস্ট করতে পারেন। আপনি ড্রপডাউন বাক্সটি তৈরি করার নিজস্ব সৃজনশীল পদ্ধতিও ভাগ করে নিতে পারেন।

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

আমাদের জন্য একটি প্রশ্ন আছে? দয়া করে এটি 'কৌণিক ড্রপডাউন' এর মন্তব্য বিভাগে উল্লেখ করুন এবং আমি আপনার কাছে ফিরে আসব।