Populate HTML Table with DropDownList (HTML Select) using AngularJS

Last Reply on Jan 19, 2018 05:20 AM By dharmendr

Posted on Jan 19, 2018 05:17 AM

i have table which contains  5 fruits information

in each row fruits name and a drop down is there

values for drop down are "Select","Yes","No"

now i have to display all the 5 fruits information below the table .

need to display in table form with the selected dropdown values.

Please give me idea in angularJS

You are viewing reply posted by: dharmendr on Jan 19, 2018 05:20 AM.
Posted on Jan 19, 2018 05:20 AM Modified on on Jan 19, 2018 05:22 AM
Refering the below article i have created the example. Refer the example.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.Customers = [
                { Name: "John Hammond", Country: "United States" },
                { Name: "Mudassar Khan", Country: "India" },
                { Name: "Suzanne Mathews", Country: "France" },
                { Name: "Robert Schidner", Country: "Russia" }
            $scope.GetDetails = function () {
                var details = '';
                $('[id*=tblCustomers] tr:not(:has(th))').each(function (index, item) {
                    var name = $scope.Customers[index].Name;
                    var country = $scope.Customers[index].Country;
                    var selected = $(item).find('[id*=ddlYesNo] option:selected').val()
                    details += "Name: " + name + "\nCountry: " + country + "\nAction: " + selected + "\n\n";
    <div ng-app="MyApp" ng-controller="MyController">
        <table id="tblCustomers" cellpadding="0" cellspacing="0">
            <tbody ng-repeat="m in Customers">
                        <select id="ddlYesNo">
                            <option value="">Select</option>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
        <br />
        <input type="button" value="Get Details" ng-click="GetDetails()" />