[Solved] DropDownList selected value reflects all rows using AngularJS in ASP.Net MVC

Last Reply 2 months ago By dharmendr

Posted 3 months ago

Hi,

based upon category i am going to change product value

Currently i am going to do it on dynamically added rows

after pushing values into array display what ever values i enter on row display it on array

before pushing values to array change event is working properly

after pushing values to array if i have done any cahnges in category 

product value is not changing

If i done any changes in catgory(any row) it was effecting product values on all rows

could you please help me

@{ 
    Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {
            $scope.Customers = [];
            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 () {
                debugger;
                var stateId = $scope.Category;
                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.Customers.push({
                    Name: $scope.Name,
                    Category: $scope.Category,
                    Product: $scope.Product,
                });

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

        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Name</th>
                <th>
                    Category
                </th>
                <th>
                    Product    
                </th>
                <th>
                    Action
                </th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>                    
                        <input type="text" ng-model="m.Name" class="form-control" />
                    <td>
                        <select class="input-sm form-control" select2="" name="CategortName" ng-model="m.Category" containerCssClass="all" ng-change="GetProducts()" 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="m.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>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>
                        <input type="text" ng-model="Name" class="input-sm form-control" />
                    </td>
                    <td>
                        <select class="input-sm form-control" select2="" name="CategortName" ng-model="Category" containerCssClass="all" ng-change="GetProducts()" ng-options="c.CategoryID 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.ProductID 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>
    </div>
</body>
</html>