অ্যাঙ্গুলারজেএস সিলেক্ট বক্স - AngularJS Select Box
অ্যারে অথবা অবজেক্টের আইটেমের উপর ভিত্তি করে AngularJS দিয়ে আপনি ড্রপডাউন লিস্ট তৈরি করতে পারেন।
ng-options ব্যবহার করে সিলেক্ট বক্স তৈরি
আপনি যদি অ্যারে অথবা অবজেক্টের আইটেমের উপর ভিত্তি করে AngularJS দিয়ে ড্রপডাউন লিস্ট তৈরি করতে চান, তাহলে ng-options ডিরেক্টিভ ব্যবহার করুন।
এই উদাহরণে কীভাবে ng-options দ্বারা ড্রপডাউন লিস্ট তৈরি করা যায় তা দেখানো হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="a for a in subjects">
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.subjects = ["Bangla", "English", "Math"];
});
</script>
</body>
</html>
ফলাফল
ng-options বনাম ng-repeat
আপনি ng-repeat ডিরেক্টিভ ব্যবহার করেও একই ড্রপডাউন লিস্ট তৈরি করতে পারেনঃ
এই উদাহরণে কীভাবে ng-repeat দ্বারা ড্রপডাউন লিস্ট তৈরি করা যায় তা দেখানো হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="a in subjects">{{a}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.subjects = ["Bangla", "English", "Math"];
});
</script>
</body>
</html>
ফলাফল
যেহেতু ng-repeat ডিরেক্টিভ অ্যারের প্রতিটি আইটেমের জন্য এইচটিএমএল কোড ব্লককে পূনাবৃত্তি করে, সেহেতু ng-repeat ডিরেক্টিভ ব্যবহার করে ড্রপডাউন লিস্টের অপশন(option) তৈরি করা যেতে পারে। কিন্তু ng-options ডিরেক্টিভ তৈরিই করা হয়েছে ড্রপডাউন লিস্টের অপশন তৈরির জন্য। তাই ng-options ব্যবহার করাই শ্রেয়।
ng-options এর মাধ্যমে তৈরি ড্রপডাউনের নির্বাচিত ভ্যালু অবজেক্ট হতে পারে। কিন্তু ng-repeat এর মাধ্যমে তৈরি ড্রপডাউনের নির্বাচিত ভ্যালু স্ট্রিং হতে হবে।
আমরা কোনটা ব্যাবহার করবো?
মনে করি car একটি অবজেক্টের অ্যারে।
$scope.cars = [
{model : "Ford Mustang", color : "red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
ng-repeat ডিরেক্টিভের সীমাবদ্ধতা আছে, এক্ষেত্রে নির্বাচিত ভ্যালুকে অবশ্যই স্ট্রিং হতে হবেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>একটি গাড়ী সিলেক্ট করুনঃ</p>
<select ng-model="selectedCar">
<option ng-repeat="a in cars" value="{{a.model}}">{{a.model}}</option>
</select>
<h3>আপনি সিলেক্ট করেছেনঃ {{selectedCar}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = [
{model : "Ford Mustang", color : "red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
});
</script>
</body>
</html>
ফলাফল
ng-options ডিরেক্টিভ ব্যবহার করলে নির্বাচিত ভ্যালু অবজেক্ট হতে পারেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>একটি গাড়ী সিলেক্ট করুনঃ</p>
<select ng-model="selectedCar" ng-options="a.model for a in cars">
</select>
<h3>আপনি সিলেক্ট করেছেনঃ {{selectedCar.model}}</h3>
<p>কালার হলোঃ {{selectedCar.color}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = [
{model : "Ford Mustang", color : "red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
});
</script>
</body>
</html>
ফলাফল
যখন নির্বাচিত ভ্যালু অবজেক্ট হয়, তখন ইহা অনেক তথ্য ধারণ করতে পারে।
আমরা আপনাকে ng-options ব্যবহার করার জন্য সুপারিশ করবো
অবজেক্ট(Object) যখন ডাটা সোর্স
পূর্ববর্তী উদাহরণে অ্যারেকে ডাটা সোর্স হিসাবে ব্যবহার করেছিলাম, কিন্তু আমরা অবজেক্টকেও ডাটা সোর্স হিসাবে ব্যবহার করতে পারি।
মনে করি car একটি অবজেক্ট(object) যার কী/ভ্যালু জোড়ায় জোড়ায় আছেঃ
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
অবজেক্টের জন্য ng-options এট্রিবিউটের মধ্যে এক্সপ্রেশন সামান্য ভিন্ন হয়।
ডাটা সোর্সকে অবজেক্ট হিসাবে ব্যবহার করলে a দ্বারা কী(key) এবং y দ্বারা ভ্যালু বুঝায়ঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>একটি গাড়ী সিলেক্ট করুনঃ</p>
<select ng-model="selectedCar" ng-options="a for (a, y) in cars">
</select>
<h3>আপনি সিলেক্ট করেছেনঃ {{selectedCar}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
}
});
</script>
</body>
</html>
ফলাফল
কী/ভ্যালু জোড়ের মধ্যে নির্বাচিত ভ্যালু সবসময়ই ভ্যালু হয়।
ভ্যালু জোড়ের মধ্যে ভ্যালু অবজেক্টও হতে পারেঃ
key-value এর ক্ষেত্রে নির্বাচিত ভ্যালুটি এখনো value। এক্ষেত্রে ইহা একটি অবজেক্টঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>একটি গাড়ী সিলেক্ট করুনঃ</p>
<select ng-model="selectedCar" ng-options="a for (a, y) in cars">
</select>
<h1>আপনি সিলেক্ট করেছেনঃ {{selectedCar.brand}}</h1>
<h2>মডেলঃ {{selectedCar.model}}</h2>
<h3>কালারঃ {{selectedCar.color}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
}
});
</script>
</body>
</html>
ফলাফল
key-value জোড়ের মধ্যে ড্রপডাউন লিস্টের অপশন কখনোই key হতে পারবে না। ইহা যালু(value) অথবা ভ্যালু(value) অবজেক্টের প্রোপার্টি হতে পারেঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>একটি গাড়ী সিলেক্ট করুনঃ</p>
<select ng-model="selectedCar" ng-options="y.brand for (a, y) in cars">
</select>
<h1>আপনি সিলেক্ট করেছেনঃ {{selectedCar.brand}}</h1>
<h2>মডেলঃ {{selectedCar.model}}</h2>
<h3>কালারঃ {{selectedCar.color}}</h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
}
});
</script>
</body>
</html>
ফলাফল