Add new Row using Footer to HTML Table on Button Click using AngularJS in ASP.Net MVC

Last Reply 3 months ago By dharmendr

Posted 3 months ago

Hi,

In dynamically added rows after clicking of add button product value is not displaying

@{
    Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Details = [{ CName: "Item1" }, { CName: "Item2"}];
            GetCategory();
            function GetCategory() {
                $scope.categories = [];
                $http({
                    method: 'Get',
                    url: '/autocomplete/GetCategories/'
                }).success(function (data, status, headers, config) {
                    $scope.categories = data;
                }).error(function (data, status, headers, config) {
                    $scope.message = 'Unexpected Error';
                });
            }

            $scope.GetProducts = function (detail, index) {
                if (detail.Category != null) {
                    var catId = detail.Category.CategoryID;
                    $http({
                        method: 'Get',
                        url: '/autocomplete/GetProducts/',
                        params: { CategoryID: catId }
                    }).success(function (data, status, headers, config) {
                        debugger;
                        if (data.length > 0) {
                            $scope.Details[index].products = data;
                        } else {
                            $scope.Details[index].products = '';
                        }
                    }).error(function (data, status, headers, config) {
                        $scope.message = 'Unexpected Error';
                    });
                } else {
                    $scope.Details[index].products = '';
                }
            }
            $scope.GetProducts1 = function () {
                var stateId = $scope.Category.CategoryID;
                if (stateId) {
                    $http({
                        method: 'POST',
                        url: '/autocomplete/GetProducts/',
                        data: JSON.stringify({ CategoryID: stateId })
                    }).success(function (data, status, headers, config) {
                        $scope.products = data;
                    }).error(function (data, status, headers, config) {
                        $scope.message = 'Unexpected Error';
                    });
                }
                else {
                    $scope.products = null;
                }
            }
            $scope.Add = function () {
                debugger;
                var customer = {};
                $scope.Details.push({
                    Name: $scope.Name,
                    Category: $scope.Category.CategortName,
                    CategoryID: $scope.Category.CategoryID,
                    Product: $scope.Product.ProductName,
                    ProductID: $scope.Product.ProductID,
                    Product: $scope.Product,
                    Category: $scope.Category,
                });

                $scope.Name = "";
                $scope.Category = "";
                $scope.Product = "";
            };

        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <table id="tblOrders" class="table table-responsive">
        <tr>
            <th>Cname</th>
            <th>Category</th>
            <th>Product</th>
        </tr>
        <tbody ng-repeat="detail in Details">
            <tr>
                <td>{{detail.CName}}</td>
                <td>
                    <select class="input-sm form-control" select2="" name="CategortName" ng-model="detail.Category"
                            containercssclass="all" ng-change="GetProducts(detail,$index)" ng-options="c as c.CategortName for c in categories"
                            ng-disabled="disabled">
                        <option value="">Select Category</option>
                    </select>
                </td>
                <td>
                    <select select2="" ng-model="detail.Product" ng-disabled="!detail.products" class="input-sm form-control"
                            ng-options="s as s.ProductName for s in detail.products">
                        <option value="">-- Select Product --</option>
                    </select>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <input type="text" ng-model="CName" class="input-sm form-control" />
                </td>
                <td>
                    <select class="input-sm form-control" select2="" name="CategortName" ng-model="Category" containerCssClass="all" ng-change="GetProducts1()" ng-options="c as c.CategortName for c in categories" ng-disabled="disabled">
                        <option value="">Select Category</option>
                    </select>
                </td>
                <td>
                    <select select2="" ng-model="Product" ng-disabled="!products"
                            class="input-sm form-control" ng-options="s as s.ProductName for s in products">
                        <option value="">-- Select Product --</option>
                    </select>
                </td>
                <td>
                    <input type="button" class="btn btn-primary" ng-click="Add()" value="Add" />
                </td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

 

 

This question does not have replies that have been liked.