Set Selected Value for DropDownList on Button click in AngularJS

Last Reply 10 days ago By dharmendr

Posted 10 days ago

Hi,

we have Name and Category Fields. after clicking of edit functionality in the below code one pop up shoule be appear

In that Name and Category Fields are displaying 

Name value is displaying propely but category value is showing empty

I want to display relevant row category name on that pop up

Update is working fine.

Problem is after clciking of edit func() value is not displaying on Category

Please help me 

<html>
<head>
    <title></title>
</head>
<body>
    <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" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script type="text/javascript">

        var app = angular.module('MyApp', [])
        app.directive("select2", function ($timeout, $parse) {
            return {
                restrict// Code goes here
            : 'AC',
                require: 'ngModel',
                link: function (scope, element, attrs) {
                    console.log(attrs);
                    $timeout(function () {
                        element.select2();
                        element.select2Initialized = true;
                    });

                    var refreshSelect = function () {
                        if (!element.select2Initialized) return;
                        $timeout(function () {
                            element.trigger('change');
                        });
                    };

                    var recreateSelect = function () {
                        if (!element.select2Initialized) return;
                        $timeout(function () {
                            element.select2('destroy');
                            element.select2();
                        });
                    };

                    scope.$watch(attrs.ngModel, refreshSelect);

                    if (attrs.ngOptions) {
                        var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];
                        // watch for option list change
                        scope.$watch(list, recreateSelect);
                    }

                    if (attrs.ngDisabled) {
                        scope.$watch(attrs.ngDisabled, refreshSelect);
                    }
                }
            };
        });

        app.controller('MyController', function ($scope, $window) {
        $scope.EditCustomer;
        $scope.EditIndex;
        $scope.Customers = [];
        $scope.Orders = [];
   
        $scope.categories = [
          { CategoryID: 1, CategortName: 'Starbuck' },
          { CategoryID: 2, CategortName: 'Appolo' },
          { CategoryID: 3, CategortName: 'Saul Tigh' },
          { CategoryID: 4, CategortName: 'Adama' }]

        $scope.Add = function () {
            //Add the new item to the Array.
            var customer = {};
            customer.Name = $scope.Name;
            customer.Category = $scope.Category.CategortName;

            $scope.Customers.push(customer);
            //Clear the TextBoxes.
            $scope.Name = "";
            $scope.Category = "";
            $scope.Date = "";
        };
        $scope.Remove = function (index) {
            //Find the record using Index from Array.
            var name = $scope.Customers[index].Name;
            if ($window.confirm("Do you want to delete: " + name)) {
                //Remove the item from Array using Index.
                $scope.Customers.splice(index, 1);
            }
        }

        $scope.edit = function (index) {
            $scope.EditCustomer = $scope.Customers[index];
            $scope.Name = $scope.EditCustomer.Name;
            $scope.Category= $scope.EditCustomer.Category;

            $scope.EditIndex = index;
            alert($scope.EditCustomer);
        }
        $scope.Update = function (index) {
            alert("updated");
            //Find the record using Index from Array.
            $scope.EditCustomer.Name = $scope.Name;
            $scope.EditCustomer.Category = $scope.Category.CategortName;
            $scope.Customers[index] = $scope.EditCustomer;
            alert($scope.EditCustomer);

            $scope.Name = "";
            $scope.Category = "";
        }
        $scope.reset = function () {
            $scope.Name = "";
            $scope.Category = "";
        }
    });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Name</th>
                <th>Category</th>               
                <th> </th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>{{m.Name}}</td>
                    <td>{{m.Category}}</td>                   
                    <td><input type="button" ng-click="edit($index)" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#popup2" value="edit" /></td>
                    <td>
                        <input type="button" ng-click="Remove($index)" value="Remove" />
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="text" ng-model="Name" /></td>
                    <td>
                        <select class="input-sm form-control" select2="" name="CategortName" ng-model="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><input type="button" ng-click="Add()" value="Add" /></td>
                </tr>
            </tfoot>
        </table>
        <div class="modal fade" id="popup2" role="dialog">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <div class="s2vk-container">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="panel panel-default" ng-model="EditCustomer">
                                        <table class="table table-condensed">
                                            <thead>
                                                <tr style="padding-left:10px; padding-right:10px;" class="active">
                                                    <th class="thick-line" style="padding-left:10px; padding-right:20px; padding-top:6px; padding-bottom:6px;">Name</th>
                                                    <th style="padding-left:10px; padding-right:10px;" class="thick-line">Category</th>
                                                    <th style="padding-left:10px; padding-right:10px;" class="thick-line">Action</th>
                                                </tr>
                                                <tr>
                                                    <td><input type="text" value="{{EditCustomer.Name}}" ng-model="Name" /></td>
                                                    <td>
                                                        <select class="input-sm form-control" select2="" name="CategortName" ng-model="Category" value="{{EditCustomer.Category}}" containerCssClass="all" ng-options="c as c.CategortName for c in categories" ng-disabled="disabled">
                                                            <option value="">Select Category</option>
                                                        </select>
                                                    </td>                                                 
                                                    <td>
                                                        <button type="button" class="btn btn-sm btn-primary" ng-click="Update()">Update</button>
                                                        <button type="button" class="btn btn-sm btn-danger" ng-click="reset()">cancel</button>

                                                    </td>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="reset()">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>  

 

Posted 10 days ago Modified on 10 days ago

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

HTML

<div ng-app="MyApp" ng-controller="MyController">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th>
                Name
            </th>
            <th>
                Category
            </th>
            <th>
            </th>
        </tr>
        <tbody ng-repeat="m in Customers">
            <tr>
                <td>
                    {{m.Name}}
                </td>
                <td>
                    {{m.Category}}
                </td>
                <td>
                    <input type="button" ng-click="edit($index)" class="btn btn-sm btn-primary" data-toggle="modal"
                        data-target="#popup2" value="edit" />
                </td>
                <td>
                    <input type="button" ng-click="Remove($index)" value="Remove" />
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                    <input type="text" ng-model="Name" />
                </td>
                <td>
                    <select class="input-sm form-control" select2="" name="CategortName" ng-model="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>
                    <input type="button" ng-click="Add()" value="Add" />
                </td>
            </tr>
        </tfoot>
    </table>
    <div class="modal fade" id="popup2" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        ×</button>
                    <h4 class="modal-title">
                        Modal Header</h4>
                </div>
                <div class="modal-body">
                    <div class="s2vk-container">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="panel panel-default" ng-model="EditCustomer">
                                    <table class="table table-condensed">
                                        <thead>
                                            <tr style="padding-left: 10px; padding-right: 10px;" class="active">
                                                <th class="thick-line" style="padding-left: 10px; padding-right: 20px; padding-top: 6px;
                                                    padding-bottom: 6px;">
                                                    Name
                                                </th>
                                                <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                    Category
                                                </th>
                                                <th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
                                                    Action
                                                </th>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input type="text" value="{{EditCustomer.Name}}" ng-model="Name" />
                                                </td>
                                                <td>
                                                    <select class="input-sm form-control" select2="" name="CategortName" ng-model="CategorySelection"
                                                        ng-change="Change()" value="{{EditCustomer.Category}}" containercssclass="all"
                                                        ng-options="c as c.CategortName for c in categories" ng-disabled="disabled">
                                                        <option value="">Select Category</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-sm btn-primary" ng-click="Update()">
                                                        Update</button>
                                                    <button type="button" class="btn btn-sm btn-danger" ng-click="reset()">
                                                        cancel</button>
                                                </td>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="reset()">
                        Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<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" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
<script type="text/javascript">

    var app = angular.module('MyApp', [])
    app.directive("select2", function ($timeout, $parse) {
        return {
            restrict// Code goes here
            : 'AC',
            require: 'ngModel',
            link: function (scope, element, attrs) {
                console.log(attrs);
                $timeout(function () {
                    element.select2();
                    element.select2Initialized = true;
                });

                var refreshSelect = function () {
                    if (!element.select2Initialized) return;
                    $timeout(function () {
                        element.trigger('change');
                    });
                };

                var recreateSelect = function () {
                    if (!element.select2Initialized) return;
                    $timeout(function () {
                        element.select2('destroy');
                        element.select2();
                    });
                };

                scope.$watch(attrs.ngModel, refreshSelect);

                if (attrs.ngOptions) {
                    var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];
                    // watch for option list change
                    scope.$watch(list, recreateSelect);
                }

                if (attrs.ngDisabled) {
                    scope.$watch(attrs.ngDisabled, refreshSelect);
                }
            }
        };
    });

    app.controller('MyController', function ($scope, $window) {
        $scope.EditCustomer;
        $scope.EditIndex;
        $scope.Customers = [];
        $scope.Orders = [];
        $scope.categories = [{ CategoryID: 1, CategortName: 'Starbuck' },
                            { CategoryID: 2, CategortName: 'Appolo' },
                            { CategoryID: 3, CategortName: 'Saul Tigh' },
                            { CategoryID: 4, CategortName: 'Adama'}]
        $scope.Add = function () {
            var customer = {};
            customer.Name = $scope.Name;
            customer.Category = $scope.Category.CategortName;

            $scope.Customers.push(customer);
            $scope.Name = "";
            $scope.Category = "";
            $scope.Date = "";
        };
        $scope.Remove = function (index) {
            var name = $scope.Customers[index].Name;
            if ($window.confirm("Do you want to delete: " + name)) {
                $scope.Customers.splice(index, 1);
            }
        }
        $scope.Change = function () {
            $scope.EditCustomer.Category = $scope.CategorySelection.CategortName;
        }
        $scope.edit = function (index) {
            $scope.EditCustomer = $scope.Customers[index];
            $scope.Name = $scope.EditCustomer.Name;
            $scope.Category = $scope.EditCustomer.Category;
            $scope.EditIndex = index;
            var index;
            for (var i = 0; i < $scope.categories.length; i++) {
                if ($scope.categories[i].CategortName == $scope.EditCustomer.Category) {
                    index = i;
                }
            }
            $scope.CategorySelection = $scope.categories[index];
        }
        $scope.Update = function (index) {
            $scope.EditCustomer.Name = $scope.Name;
            $scope.EditCustomer.Category = $scope.Category.CategortName;
            $scope.Customers[index] = $scope.EditCustomer;
            $scope.Name = "";
            $scope.Category = "";
        }

        $scope.reset = function () {
            $scope.Name = "";
            $scope.Category = "";
        }
    });
</script>

Demo