Populate HTML Table with DropDownList (HTML Select) using AngularJS

Last Reply 6 months ago By dharmendr

Posted 6 months ago

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

Posted 6 months ago Modified on 6 months ago
 
Refering the below article i have created the example. Refer the example.
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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";
                });
                $window.alert(details);
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table id="tblCustomers" cellpadding="0" cellspacing="0">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Country
                </th>
                <th>
                    Action
                </th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>
                        {{m.Name}}
                    </td>
                    <td>
                        {{m.Country}}
                    </td>
                    <td>
                        <select id="ddlYesNo">
                            <option value="">Select</option>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
        <br />
        <input type="button" value="Get Details" ng-click="GetDetails()" />
    </div>
</body>
</html>

Demo