AngularJS Select

In AngularJS, the ng-select directive is commonly used for creating dropdown menus. It allows users to select a value from a list of options, and the selected value is automatically bound to the model, facilitating two-way data binding.

Key Concepts of ng-select in AngularJS

1. ng-model: Used to bind the selected value to the AngularJS model.
2. ng-options: Dynamically generates <option> elements based on an array or object.
3. ng-change: Triggered when the user changes the selected value.
4. Multiple Selection: Allows selecting multiple values from the dropdown.

 

Basic Example of Select Dropdown

Simple Select Example

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedItem" ng-options="item for item in items">
    <option value="">Select an item</option>
  </select>
  <p>Selected Item: {{selectedItem}}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.items = ["Item 1", "Item 2", "Item 3"];
  });
</script>

• ng-model="selectedItem" binds the dropdown to the model selectedItem.
• ng-options="item for item in items" iterates over the items array to create dropdown options.

 

Select with Value and Label

You can bind both the value and the label using ng-options by defining an object for each option.

Example with Object Binding

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedItem" ng-options="item.name for item in items">
    <option value="">Select an item</option>
  </select>
  <p>Selected Item: {{selectedItem.name}}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.items = [
      { name: "Item 1", value: 1 },
      { name: "Item 2", value: 2 },
      { name: "Item 3", value: 3 }
    ];
  });
</script>

• The ng-options directive maps the name property of each object as the label in the dropdown, while the entire object is bound to the model.

 

Select with Multiple Options

AngularJS also supports multiple selection in a dropdown using the multiple attribute.

Example of Multiple Selection

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedItems" ng-options="item for item in items" multiple>
    <option value="">Select Items</option>
  </select>
  <p>Selected Items: {{selectedItems}}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.items = ["Item 1", "Item 2", "Item 3", "Item 4"];
  });
</script>

• multiple: Allows selecting more than one item from the dropdown.
• ng-model="selectedItems": Binds the selected values to the model selectedItems as an array.

 

Using ng-change with Select

You can use the ng-change directive to execute a function whenever the selection changes.

Example with ng-change

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedItem" ng-options="item for item in items" ng-change="itemChanged()">
    <option value="">Select an item</option>
  </select>
  <p>Selected Item: {{selectedItem}}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.items = ["Item 1", "Item 2", "Item 3"];
    
    $scope.itemChanged = function() {
      alert("Selected item is: " + $scope.selectedItem);
    };
  });
</script>

• ng-change="itemChanged()" calls the itemChanged function whenever the selected option changes, displaying an alert.

 

Select with Grouping

You can group options in the dropdown using the optgroup HTML element.

Example with Grouping

<div ng-app="myApp" ng-controller="myCtrl">
  <select ng-model="selectedItem" ng-options="item.name for item in items track by item.id">
    <option value="">Select an item</option>
    <optgroup label="Group 1">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
    </optgroup>
    <optgroup label="Group 2">
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
    </optgroup>
  </select>
  <p>Selected Item: {{selectedItem}}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.items = [
      { name: "Item 1", id: 1 },
      { name: "Item 2", id: 2 },
      { name: "Item 3", id: 3 },
      { name: "Item 4", id: 4 }
    ];
  });
</script>

• optgroup groups related options under a common label.

 

Summary

The ng-select directive in AngularJS provides powerful features for working with dropdown menus, offering support for single or multiple selections, dynamic population of options, event handling, and even option grouping. By combining ng-options, ng-model, and ng-change, developers can easily implement user-friendly and interactive forms.