অ্যাঙ্গুলারজেএস
🌈অ্যাঙ্গুলারজেএস কি?
📋অ্যাঙ্গুলারজেএস হলো ডেটা যাচাই ও ফিল্টার করার পদ্ধতি।
⚒️অ্যাঙ্গুলারজেএস ডেটা যাচাই ও ফিল্টার করতে ব্যবহৃত হয়।
অ্যাঙ্গুলারজেএস সমূহ
অ্যাঙ্গুলারজেএস এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ filter - তথ্য নির্দিষ্ট শর্ত অনুযায়ী ফিল্টার করা
- ➡️ limitTo - তথ্যের নির্দিষ্ট সংখ্যক অংশ নির্বাচন করা
- ➡️ lowercase - লেখাকে ছোট হাতের অক্ষরে রূপান্তর করা
- ➡️ number - সংখ্যাকে নির্দিষ্ট ফরম্যাটে প্রদর্শন করা
- ➡️ orderBy - তথ্য নির্দিষ্ট ক্রমে সাজানো
- ➡️ uppercase - লেখাকে বড় হাতের অক্ষরে রূপান্তর করা
filter - তথ্য নির্দিষ্ট শর্ত অনুযায়ী ফিল্টার করার উদাহরণ।
angularjs
<!DOCTYPE html>
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<body>
<div ng-controller="app">
<input ng-model="search" placeholder="সার্চ">
<ul>
<li ng-repeat="name in names | filter:search">
{{name}}
</li>
</ul>
</div>
<script>
angular.module("app", [])
.controller("app", function($scope) {
$scope.names = ["আপেল", "আঙ্গুর", "কমলা", "কলা"];
});
</script>
</body>
</html>
limitTo - তথ্যের নির্দিষ্ট সংখ্যক অংশ নির্বাচন করার উদাহরণ।
angularjs
<!DOCTYPE html>
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<body>
<div ng-controller="app">
<ul>
<li ng-repeat="fruit in fruits | limitTo:3">
{{fruit}}
</li>
</ul>
</div>
<script>
angular.module("app", [])
.controller("app", function($scope) {
$scope.fruits = ["আপেল", "আঙ্গুর", "কমলা", "কলা"];
});
</script>
</body>
</html>
lowercase - লেখাকে ছোট হাতের অক্ষরে রূপান্তর করার উদাহরণ।
angularjs
<!DOCTYPE html>
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<body>
<div ng-controller="app">
<input ng-model="text">
<p>{{text | lowercase}}</p>
</div>
<script>
angular.module("app", [])
.controller("app", function($scope) {
$scope.text = "হ্যালো বিশ্ব";
});
</script>
</body>
</html>
number - সংখ্যাকে নির্দিষ্ট ফরম্যাটে প্রদর্শন করার উদাহরণ।
angularjs
<!DOCTYPE html>
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<body>
<div ng-controller="app">
<p>{{price | number}}</p>
<p>{{price | number:2}}</p>
</div>
<script>
angular.module("app", [])
.controller("app", function($scope) {
$scope.price = 1234567.891;
});
</script>
</body>
</html>
orderBy - তথ্য নির্দিষ্ট ক্রমে সাজানোর উদাহরণ।
angularjs
<!DOCTYPE html>
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<body>
<div ng-controller="app">
<button ng-click="reverse = !reverse">
সোর্ট
</button>
<ul>
<li ng-repeat="user in users | orderBy:'name':reverse">
{{user.name}} - {{user.age}}
</li>
</ul>
</div>
<script>
angular.module("app", [])
.controller("app", function($scope) {
$scope.reverse = false;
$scope.users = [
{name: "আরিফ", age: 25},
{name: "তানিম", age: 30},
{name: "সাকিব", age: 22},
{name: "তায়িফ", age: 28}
];
});
</script>
</body>
</html>
uppercase - লেখাকে বড় হাতের অক্ষরে রূপান্তর করার উদাহরণ।
angularjs
<!DOCTYPE html>
<html ng-app="app">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<body>
<div ng-controller="app">
<input ng-model="text">
<p>{{text | uppercase}}</p>
</div>
<script>
angular.module("app", [])
.controller("app", function($scope) {
$scope.text = "হ্যালো বিশ্ব";
});
</script>
</body>
</html>
অ্যাঙ্গুলারজেএস সম্পর্কিত বিস্তারিত তথ্য
কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক
| নাম | বিবরণ |
|---|---|
| filter | তথ্য নির্দিষ্ট শর্ত অনুযায়ী ফিল্টার করতে ব্যবহৃত হয়। |
| limitTo | তথ্যের নির্দিষ্ট সংখ্যক অংশ নির্বাচন করতে ব্যবহৃত হয়। |
| lowercase | লেখাকে ছোট হাতের অক্ষরে রূপান্তর করতে ব্যবহৃত হয়। |
| number | সংখ্যাকে নির্দিষ্ট ফরম্যাটে প্রদর্শন করতে ব্যবহৃত হয়। |
| orderBy | তথ্য নির্দিষ্ট ক্রমে সাজাতে ব্যবহৃত হয়। |
| uppercase | লেখাকে বড় হাতের অক্ষরে রূপান্তর করতে ব্যবহৃত হয়। |