Course Progress 38%

AngularJS Select Boxes

← AngularJS Tables AngularJS SQL →

AngularJS Select Boxes का उपयोग dropdown list बनाने के लिए किया जाता है। AngularJS में select box simple HTML <select> से लेकर dynamic, data-driven dropdowns तक बहुत आसानी से बनाए जा सकते हैं। ng-model, ng-options और ng-repeat की मदद से select box को application data से connect किया जाता है।

Select boxes forms, filters, settings और user input के लिए बहुत common component हैं।

Basic Select Box (ng-model)

सबसे simple AngularJS select box ng-model के साथ बनाया जाता है।

<div ng-app="myApp" ng-controller="selectCtrl">
  <select ng-model="selectedColor">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
  </select>

  <p>You selected: {{selectedColor}}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("selectCtrl", function($scope) {
    $scope.selectedColor = "Red";
  });
</script>

Code Explanation

  • <select> को AngularJS से bind करने के लिए ng-model use किया गया है
  • selectedColor scope variable user selection store करता है
  • Default value "Red" set की गई है
  • Selection change होते ही paragraph automatically update हो जाता है

Select Box with ng-repeat

अगर options data array से generate करने हों तो ng-repeat का उपयोग किया जाता है।

<select ng-model="selectedCity">
  <option ng-repeat="city in cities" value="{{city}}">
    {{city}}
  </option>
</select>

<p>City: {{selectedCity}}</p>

$scope.cities = ["Delhi", "Mumbai", "Chennai", "Kolkata"];

Code Explanation

  • cities array से options dynamically create हो रहे हैं
  • ng-repeat हर item के लिए एक <option> बनाता है
  • Selected value selectedCity में store होती है

Select Box with ng-options (Recommended)

AngularJS में select box के लिए ng-options best practice माना जाता है।

<select ng-model="selectedCountry"
        ng-options="country for country in countries">
</select>

<p>Country: {{selectedCountry}}</p>

$scope.countries = ["India", "USA", "UK", "Canada"];

Code Explanation

  • ng-options performance के लिए optimized होता है
  • Syntax readable और clean रहता है
  • Directly array से options generate होते हैं
  • Selected item पूरा value return करता है

Select Box with Objects

Real applications में select options objects के रूप में होते हैं।

<select ng-model="selectedUser"
        ng-options="user.name for user in users">
</select>

<p>Selected User ID: {{selectedUser.id}}</p>

$scope.users = [
  { id: 1, name: "Rahul" },
  { id: 2, name: "Neha" },
  { id: 3, name: "Amit" }
];

Code Explanation

  • users array में objects हैं
  • Dropdown में सिर्फ name show होता है
  • Select करने पर पूरा object selectedUser में store होता है
  • Object properties directly access की जा सकती हैं

Select Box with track by

Duplicate values या performance improvement के लिए track by use किया जाता है।

<select ng-model="selectedUser"
        ng-options="user.name for user in users track by user.id">
</select>

Code Explanation

  • track by user.id unique key define करता है
  • AngularJS ko पता चलता है कि कौन सा option unique है
  • Duplicate objects की problem avoid होती है

Default Option (Placeholder)

Select box में default placeholder option add किया जा सकता है।

<select ng-model="selectedItem"
        ng-options="item for item in items">
  <option value="">Select an item</option>
</select>

Code Explanation

  • Empty <option> placeholder की तरह काम करता है
  • जब तक user select नहीं करता, model empty रहता है
  • Forms validation में helpful होता है

Multiple Select Box

AngularJS multiple select boxes भी support करता है।

<select ng-model="selectedSkills"
        ng-options="skill for skill in skills"
        multiple>
</select>

<p>Skills: {{selectedSkills}}</p>

$scope.skills = ["HTML", "CSS", "JavaScript", "AngularJS"];

Code Explanation

  • multiple attribute multiple selection allow करता है
  • selectedSkills array के रूप में values store करता है
  • Real-time selection update होता है

Select Box with ng-change

Selection change होने पर function call करने के लिए ng-change use किया जाता है।

<select ng-model="selectedFruit"
        ng-options="fruit for fruit in fruits"
        ng-change="showMessage()">
</select>

<p>{{message}}</p>

$scope.fruits = ["Apple", "Banana", "Mango"];
$scope.showMessage = function() {
  $scope.message = "You selected " + $scope.selectedFruit;
};

Code Explanation

  • ng-change selection change detect करता है
  • showMessage() function call होता है
  • User interaction handle करने में useful है

Disabled Select Option

Specific options को disable भी किया जा सकता है।

<select ng-model="selectedOption"
        ng-options="item.name disable when item.disabled for item in options">
</select>

$scope.options = [
  { name: "Option 1", disabled: false },
  { name: "Option 2", disabled: true },
  { name: "Option 3", disabled: false }
];

Code Explanation

  • disable when condition based disabling करता है
  • Disabled option select नहीं किया जा सकता
  • Dynamic control possible होता है

Select Box Best Practices

  • Simple lists के लिए ng-options use करें
  • Objects के साथ हमेशा track by use करें
  • Default empty option रखें
  • Business logic controller या service में रखें

Common Select Box Mistakes

  • ng-repeat और ng-options को साथ use करना
  • Object select करके primitive value expect करना
  • track by ignore करना
  • Default value initialize न करना

Summary

इस chapter में आपने सीखा:

  • AngularJS select box कैसे बनाते हैं
  • ng-model से data binding
  • ng-options और ng-repeat का सही उपयोग
  • Object-based dropdowns
  • Multiple select और change events
  • Best practices और common mistakes
← AngularJS Tables AngularJS SQL →
  • Home