AngularJS Select - Drop downs example

Write code here

J | B | A

<!DOCTYPE html>
<html>
	<head>
		<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>
<body>
<script>
    var app = angular.module("app", []);
    app.controller("SelectController", function ($scope) {

$scope.PersonalDetails = [{ FirstName: 'Sheo', LastName: 'Narayan', active : false },
                      { FirstName: 'Sushmita', LastName: 'Narayan', active: true },
                      { FirstName: 'Sushant', LastName: 'Shankar' },
                      { FirstName: 'Sain', LastName: 'Dogvnta', active: true }];

$scope.People = {
            "R": "Ram",
            "S": "Shyam",
            "M": "Moham",
            "G": "Gita",
            "L": "Lakhesh",
            "J": "John"
        };

$scope.SelectedValue = "";

$scope.FullName = function (person) {
            return person.FirstName + ' ' + person.LastName;
        };

$scope.SearchDetails = function (thisFName) {
            $scope.SearchedDetails = { FirstName: thisFName };
        };
    });
</script>
<div ng-app="app" ng-controller="SelectController">
    <p>
        Default : <select name="select1" 
        ng-model="SelectedValue" ng-options="details.FirstName for details in PersonalDetails"></select>
    </p>
    <p>
        Default value : <select name="select2" ng-model="SelectedValue" ng-options="details.FirstName for details in PersonalDetails">
        <option value="">Please select ...</option>
        </select>
    </p>
    <p>
        Group by : <select name="select3" ng-model="SelectedValue" 
               ng-options="details.FirstName group by details.LastName for details in PersonalDetails">
            <option value="">Please select ...</option>
        </select>
    </p>
    <p>
        Combine fields: <select name="select4" ng-model="SelectedValue" 
            ng-options="FullName(details) for details in PersonalDetails">
        </select>
    </p>
    <p>
        Full Name alias: <select name="select5" ng-model="SelectedValue" 
           ng-options="details.FirstName as FullName(details) for details in PersonalDetails"></select>
    </p>

<hr />
    <p>Selected object : <b>{{ SelectedValue }}</b></p>
    <p>Selected name : <b>{{ SelectedValue.FirstName }}</b></p>

<hr />
    <h2>Search </h2>
    <select id="select6" ng-model="SearchedDetails"
            ng-options="details.FirstName for details in PersonalDetails track by details.FirstName">
        <option value="">No details</option>
    </select><br />
    Search based on First name: <input type="text" ng-model="thisFirstName" ng-change="SearchDetails(thisFirstName)" /><br />
    <p>Found details : <b>{{ SearchedDetails }}</b></p>
</div>
</body>
</html>

Note: We DO NOT save your trial code in our database.

AngularJS > Select - Drop Downs

Write code here

Output