Jassif Team Institution

AngularJS বাক্স নির্বাচন করুন

অ্যাঙ্গুলারজেএস আপনাকে অ্যারে বা অবজেক্টের আইটেমের উপর ভিত্তি করে ড্রপডাউন তালিকা তৈরি করতে দেয়।

ng-বিকল্প ব্যবহার করে একটি নির্বাচন বাক্স তৈরি করা হচ্ছে

আপনি যদি AngularJS-এ একটি অবজেক্ট বা অ্যারের উপর ভিত্তি করে একটি ড্রপডাউন তালিকা তৈরি করতে চান, তাহলে আপনার ng-options নির্দেশিকা ব্যবহার করা উচিত:

Example

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

ng-options vs ng-repeat

আপনি একই ড্রপডাউন তালিকা তৈরি করতে ng-রিপিট নির্দেশিকা ব্যবহার করতে পারেন:

Example

<select>
  <option ng-repeat="x in names">{{x}}</option>
</select>

এনজি-রিপিট নির্দেশিকা একটি সারিতে প্রতিটি আইটেমের জন্য এইচটিএমএল কোডের একটি ব্লকের পুনরাবৃত্তি করে, যা একটি ড্রপডাউন তালিকায় বিকল্পগুলি তৈরি করতে ব্যবহার করা যেতে পারে, তবে এনজি-অপশন নির্দেশিকাটি বিশেষভাবে বিকল্পগুলির সাথে একটি ড্রপডাউন তালিকা তৈরি করার জন্য তৈরি করা হয়েছিল৷

কি ব্যবহার করতে হবে?

আপনি ng-রিপিট নির্দেশিকা এবং ng-বিকল্প নির্দেশিকা উভয়ই ব্যবহার করতে পারেন:

ধরে নিন আপনার কাছে বস্তুর একটি অ্যারে আছে:

$scope.cars = [
  {model : "Ford Mustang", color : "red"},
  {model : "Fiat 500", color : "white"},
  {model : "Volvo XC90", color : "black"}
];

Example

ng-পুনরাবৃত্তি ব্যবহার করে:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>

<h1>You selected: {{selectedCar}}</h1>

একটি বস্তু হিসাবে মান ব্যবহার করার সময়, মানের পরিবর্তে ng-মান ব্যবহার করুন:

Example

একটি বস্তু হিসাবে ng-পুনরাবৃত্তি ব্যবহার করে:

<select ng-model="selectedCar">
  <option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>

<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>

Example

ng-বিকল্প ব্যবহার করে:

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>

<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>

একটি বস্তু একটি তথ্য উৎস

পূর্ববর্তী উদাহরণে তথ্যের মাধ্যমে একটি অ্যারে ছিল, কিন্তু আমরা একটি বস্তু ব্যবহার করতে পারি।

ধরুন আপনার কাছে কী-মান জোড়া সহ একটি বস্তু আছে:

$scope.cars = {
  car01 : "Ford",
  car02 : "Fiat",
  car03 : "Volvo"
};

ng-options অ্যাট্রিবিউটের অভিব্যক্তি বস্তুর জন্য সামান্য ভিন্ন:

Example

ডেটা উত্স হিসাবে একটি বস্তু ব্যবহার করে, x কী প্রতিনিধিত্ব করে এবং y মানটি উপস্থাপন করে:

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>

<h1>You selected: {{selectedCar}}</h1>

নির্বাচিত মান সর্বদা একটি কী-মান জোড়ার মান।

একটি মূল-মান জোড়ার একটি মানও একটি বস্তু হতে পারে:

Example

নির্বাচিত মানটি এখনও একটি কী-মান জোড়ার একটি মান, কিন্তু এবার এটি একটি বস্তু:

$scope.cars = {
  car01 : {brand : "Ford", model : "Mustang", color : "red"},
  car02 : {brand : "Fiat", model : "500", color : "white"},
  car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

একটি ড্রপডাউন তালিকার বিকল্পগুলি একটি কী-মান জোড়ায় একটি কী হতে হবে না, এটি একটি মান বা একটি মান বস্তুর বৈশিষ্ট্য হতে পারে:

Example

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

ব্যায়ামের মাধ্যমে শেখা