AngularJS Select

📌 AngularJS Select क्या है?

AngularJS में <select> element को dynamic और interactive बनाने के लिए हम ng-model और ng-options directives का उपयोग करते हैं।

आसान भाषा में: AngularJS की मदद से आप ऐसा drop-down बना सकते हैं जो data के साथ auto-update, bind, और control हो सके।

---

✅ AngularJS में Select को Control करने के 2 तरीके:

तरीका	Description
ng-model	Select box में जो चुना गया है, वो किस variable में store हो
ng-options	Select के अंदर कौन-कौन से options दिखें

---

✍️ Basic Syntax:

<select ng-model="selectedItem" ng-options="item for item in itemList"></select>

• ng-model → जो चुना गया, वो value इसमें जाएगा
• ng-options → Drop-down के लिए options generate करता है

---

✅ Example 1: Simple Select Box

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedCity" ng-options="city for city in cities"></select>
  <p>You selected: {{ selectedCity }}</p>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.cities = ["Delhi", "Mumbai", "Kolkata", "Chennai"];
});
</script>

Output: एक dynamic drop-down list जिसमें आप किसी भी city को चुन सकते हैं।

---

✅ Example 2: Object-Based Select Box

<select ng-model="selectedStudent" ng-options="student.name for student in students"></select>
<p>You selected: {{ selectedStudent.name }} (Age: {{ selectedStudent.age }})</p>

$scope.students = [
  { name: "Amit", age: 22 },
  { name: "Priya", age: 24 },
  { name: "Ravi", age: 21 }
];

Drop-down में name दिखेगा, और select करते ही उसके पूरे object की detail नीचे दिखेगी।

---

✅ Example 3: Default Value Set करना

$scope.selectedCity = $scope.cities[0];

इसका मतलब पहले से कोई value selected रहेगी जब पेज load होगा।

---

✅ Example 4: track by (Unique Value Binding)

<select ng-model="selected" ng-options="item.name for item in items track by item.id"></select>

इससे AngularJS को हर option की unique पहचान (ID) मिलती है। Performance और comparison fast होता है।

---

✅ Example 5: Add Option Manually (ng-repeat alternative)

<select ng-model="fruit">
  <option ng-repeat="f in fruits" value="{{f}}">{{f}}</option>
</select>

Note: ये काम करता है लेकिन ng-options ज़्यादा efficient और clean है।

---

⚠️ Common Mistakes Avoid करें

❌ सिर्फ <option> का value देना और ng-model ना bind करना
❌ ng-options में object की जगह string देना
✅ Always use ng-model और ng-options साथ में

---

🧠 अभ्यास प्रश्न (Exercise)

1. AngularJS में ng-options का क्या काम है?
2. अगर आप select में object show कर रहे हैं तो value कैसे bind होगी?
3. ng-model और ng-options के बिना select कैसे behave करेगा?

---

✅ आपने क्या सीखा?

• AngularJS में <select> को dynamic कैसे बनाते हैं
• ng-model से selected value को कैसे bind करते हैं
• ng-options से options को auto-generate करना
• Object-based dropdown और default values

---

🎯 अब आप अपने AngularJS App में fully dynamic और smart dropdowns बना सकते हैं!