Relevant Dropdown value is not displaying on popup

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

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sreekanth Reddy7y ago
Accepted answer
Updated Code :

Name Category
{{m.Name}} {{m.Category}}
Modal Header
Name Category Action

Mahesh Reddy7y ago

I have replaced with your code

the value is not diplaying properly

it was not displaying another row value

Please check it

Name	Category
{{m.Name}}	{{m.Category}}

Name	Category	Action

Sreekanth Reddy7y ago
Update the dropdownlist select tag as like below for select2.

Mark as answer. If it helps.
Thank you.
Sreekanth Reddy7y ago
Hi Mahesh,
Try the following code.

Name Category
{{m.Name}} {{m.Category}}
Modal Header
Name Category Action
Sreekanth Reddy7y ago
Hi Mahesh,

Use the following dropdownlist It will give you solution as per expected:

If it helps, mark as answer.
Thank you.

Relevant Dropdown value is not displaying on popup

Modal Header

Modal Header

Modal Header