Relevant Dropdown value is not displaying on popup

Question

Hi, when i click edit functionality at that time releveant row values are updating on popup right now my isssue is that releavnt category value is not displaying on drop down i have Name and Category fields Could Please anybody help me Please copy and paste my code on your's browser and help me "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" /> "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > "text/javascript" src= "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js" > "text/javascript" src= "https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js" > "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js" > "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) { debugger ; //$scope.parentrow =true; //Find the record using Index from Array. $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 = "" ; } }); "MyApp" ng-controller= "MyController" > "0" cellspacing= "0" > Name Category "m in Customers" > {{m.Name}} {{m.Category}} "button" ng-click= "edit($index)" class = "btn btn-sm btn-primary" data-toggle= "modal" data-target= "#popup2" value= "edit" /> "button" ng-click= "Remove($index)" value= "Remove" /> "text" ng-model= "Name" /> 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" > "" >Select Category "button" ng-click= "Add()" value= "Add" /> class = "modal fade" id= "popup2" role= "dialog" > class = "modal-dialog modal-lg" > class = "modal-content" > class = "modal-header" > "button" class = "close" data-dismiss= "modal" >× class = "modal-title" >Modal Header class = "modal-body" > class = "s2vk-container" > class = "row" > class = "col-md-8" > class = "panel panel-default" ng-model= "EditCustomer" > class = "table table-condensed" > "padding-left:10px; padding-right:10px;" class = "active" > class = "thick-line" style= "padding-left:10px; padding-right:20px; padding-top:6px; padding-bottom:6px;" >Name "padding-left:10px; padding-right:10px;" class = "thick-line" >Category "padding-left:10px; padding-right:10px;" class = "thick-line" >Action "text" value= "{{EditCustomer.Name}}" ng-model= "Name" /> 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" > "" >Select Category "button" class = "btn btn-sm btn-primary" ng-click= "Update()" >Update "button" class = "btn btn-sm btn-danger" ng-click= "reset()" >cancel class = "modal-footer" > "button" class = "btn btn-default" data-dismiss= "modal" ng-click= "reset()" >Close

Sreekanth Reddy · Answer

Updated Code : 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) { debugger; //$scope.parentrow =true; //Find the record using Index from Array. $scope.EditCustomer = $scope.Customers[index]; $scope.Name = $scope.EditCustomer.Name; $scope.Category= $scope.EditCustomer.Category; $scope.CategoryIs = $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.CategoryIs; $scope.Customers[index] = $scope.EditCustomer; alert($scope.EditCustomer); $scope.Name = ""; $scope.Category = ""; } $scope.reset = function () { $scope.Name = ""; $scope.CategoryIs = ""; } }); Name Category {{m.Name}} {{m.Category}} c.CategortName for c in categories" ng-disabled="disabled"> Select Category × Modal Header Name Category Action Please Select ng-selected="cat.CategortName == EditCustomer.Category"> {{cat.CategortName}} Update cancel Close

Mahesh Reddy · Answer

I have replaced with your code the value is not diplaying properly it was not displaying another row value Please check it 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) { debugger; //$scope.parentrow =true; //Find the record using Index from Array. $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.Update = function (index) { alert("updated"); //Find the record using Index from Array. $scope.EditCustomer.Name = $scope.Name; $scope.EditCustomer.Category = $scope.CategoryIs; $scope.Customers[index] = $scope.EditCustomer; alert($scope.EditCustomer); $scope.Name = ""; $scope.Category = ""; } $scope.reset = function () { $scope.Name = ""; $scope.Category = ""; } }); Name Category {{m.Name}} {{m.Category}} Select Category × Modal Header Name Category Action @* Select Category *@ Please Select ng-selected="cat.CategortName == EditCustomer.Category"> {{cat.CategortName}} Update cancel Close

Sreekanth Reddy · Answer

Update the dropdownlist select tag as like below for select2. Please Select ng-selected="cat.CategortName == EditCustomer.Category"> {{cat.CategortName}} Mark as answer. If it helps. Thank you.

Sreekanth Reddy · Answer

Hi Mahesh, Try the following code. 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) { debugger; //$scope.parentrow =true; //Find the record using Index from Array. $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.CategoryIs; $scope.Customers[index] = $scope.EditCustomer; alert($scope.EditCustomer); $scope.Name = ""; $scope.Category = ""; } $scope.reset = function () { $scope.Name = ""; $scope.Category = ""; } }); Name Category {{m.Name}} {{m.Category}} c.CategortName for c in categories" ng-disabled="disabled"> Select Category × Modal Header Name Category Action Please Select ng-selected="cat.CategortName == EditCustomer.Category"> {{cat.CategortName}} Update cancel Close

Sreekanth Reddy · Answer

Hi Mahesh, Use the following dropdownlist It will give you solution as per expected: Please Select ng-selected="cat.CategortName == EditCustomer.Category"> {{cat.CategortName}} If it helps, mark as answer. Thank you.