Introduction:

 

In this article we will explain how to use ng-option in AngularJS or what is ng-option in AngularJS or how to use ng-repeat in AngularJS  or how to bind drop down list using ng-option  or

ng-repeat  in AngularJS with example.

 

Description:

 

The AngularJS ng-option or ng-repeat directive help us to bind data in dropdown lists based on an array or an object. If you want to bind a dropdown list, based on an object or an array in AngularJS, you should use the ng-option or ng-repeat directive.


  • Creating a Dropdown List Using ng-options
@{
    ViewBag.Title = "Home Page";
}
 
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/angular.js"></script>
 
<div ng-app="mainApp" ng-controller="MyController">  
        <table border="0">
            <tr>
                <td colspan="2" ><h2>AngularJS Application with ng-options</h2></td>
            </tr>
            <tr>
                <td>Select Name:</td>
                <td>
                    <select ng-model="data.model" ng-options="x.id as x.name for x in data.Users" style=" width:300px; height:30px;"></select>
                </td>
            </tr>
            <tr>
                <td>Selected Value: </td>
                <td>
                    {{data.model}}
                </td>
            </tr>         
 
        </table>
</div>
 
<script>
    var mainApp = angular.module("mainApp", []);
    mainApp.controller('MyController', function ($scope) {
        $scope.data = {      
            model: null,
        Users:[{ id: '1', name: 'Aditya' },
                 { id: '2', name: 'Pawan' },
                 { id: '3', name: 'Manoj' },
                 { id: '4', name: 'Rohit' },
                 { id: '5', name: 'Shivam' }]
    }
            
    });
</script>
<style>
    table {
        width:500px;
        margin:0 auto;
    }
     table, th, td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
    }
 
        table tr:nth-child(odd) {
            background-color: #ccc;
        }
 
        table tr:nth-child(even) {
            background-color: #ffffff;
        }
</style>

 

Result:

Select Option in AngularJS

Select Option in AngularJS

  •        Creating a Dropdown List Using ng-repeat 


@{
    ViewBag.Title = "Home Page";
}
 
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/angular.js"></script>
 
<div ng-app="mainApp" ng-controller="MyController">
        <table border="0">
            <tr>
                <td colspan="2"><h2>AngularJS Application with ng-repeat</h2></td>
            </tr>
            <tr>
                <td>Select Name:</td>
                <td>
                    <select ng-model="data.model" style=" width:300px; height:30px;">
                        <option ng-repeat="x in data.Users" value="{{x.id}}">{{x.name}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Selected Value: </td>
                <td>
                    {{data.model}}
                </td>
            </tr>
        </table>
  
</div>
 
<script>
    var mainApp = angular.module("mainApp", []);
    mainApp.controller('MyController', function ($scope) {
        $scope.data = {      
            model: null,
        Users:[{ id: '1', name: 'Aditya' },
                 { id: '2', name: 'Pawan' },
                 { id: '3', name: 'Manoj' },
                 { id: '4', name: 'Rohit' },
                 { id: '5', name: 'Shivam' }]
    }
            
    });
</script>
<style>
    table {
        width:500px;
        margin:0 auto;
    }
     table, th, td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
    }
 
        table tr:nth-child(odd) {
            background-color: #ccc;
        }
 
        table tr:nth-child(even) {
            background-color: #ffffff;
        }
</style>

 

Result:

Select Option in AngularJS

Select Option in AngularJS

           I hope this article will help to you.


0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like