Post
Ask Question
Mahesh Reddy

Mahesh Reddy

  • NA
  • 363
  • 15.4k

Relevant Dropdown value is not displaying on popup

Dec 3 2018 1:45 AM
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
  1. <html>  
  2. <head>  
  3. <title></title>  
  4. </head>  
  5. <body>  
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />  
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  9. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>  
  10. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>  
  11. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>  
  13. <script type="text/javascript">  
  14. var app = angular.module('MyApp', [])  
  15. app.directive("select2", function ($timeout, $parse) {  
  16. return {  
  17. restrict// Code goes here  
  18. : 'AC',  
  19. require: 'ngModel',  
  20. link: function (scope, element, attrs) {  
  21. console.log(attrs);  
  22. $timeout(function () {  
  23. element.select2();  
  24. element.select2Initialized = true;  
  25. });  
  26. var refreshSelect = function () {  
  27. if (!element.select2Initialized) return;  
  28. $timeout(function () {  
  29. element.trigger('change');  
  30. });  
  31. };  
  32. var recreateSelect = function () {  
  33. if (!element.select2Initialized) return;  
  34. $timeout(function () {  
  35. element.select2('destroy');  
  36. element.select2();  
  37. });  
  38. };  
  39. scope.$watch(attrs.ngModel, refreshSelect);  
  40. if (attrs.ngOptions) {  
  41. var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];  
  42. // watch for option list change  
  43. scope.$watch(list, recreateSelect);  
  44. }  
  45. if (attrs.ngDisabled) {  
  46. scope.$watch(attrs.ngDisabled, refreshSelect);  
  47. }  
  48. }  
  49. };  
  50. });  
  51. app.controller('MyController', function ($scope, $window) {  
  52. $scope.EditCustomer;  
  53. $scope.EditIndex;  
  54. $scope.Customers = [];  
  55. $scope.Orders = [];  
  56. $scope.categories = [  
  57. { CategoryID: 1, CategortName: 'Starbuck' },  
  58. { CategoryID: 2, CategortName: 'Appolo' },  
  59. { CategoryID: 3, CategortName: 'Saul Tigh' },  
  60. { CategoryID: 4, CategortName: 'Adama' }  
  61. ]  
  62. $scope.Add = function () {  
  63. //Add the new item to the Array.  
  64. var customer = {};  
  65. customer.Name = $scope.Name;  
  66. customer.Category = $scope.Category.CategortName;  
  67. $scope.Customers.push(customer);  
  68. //Clear the TextBoxes.  
  69. $scope.Name = "";  
  70. $scope.Category = "";  
  71. $scope.Date = "";  
  72. };  
  73. $scope.Remove = function (index) {  
  74. //Find the record using Index from Array.  
  75. var name = $scope.Customers[index].Name;  
  76. if ($window.confirm("Do you want to delete: " + name)) {  
  77. //Remove the item from Array using Index.  
  78. $scope.Customers.splice(index, 1);  
  79. }  
  80. }  
  81. $scope.edit = function (index) {  
  82. debugger;  
  83. //$scope.parentrow =true;  
  84. //Find the record using Index from Array.  
  85. $scope.EditCustomer = $scope.Customers[index];  
  86. $scope.Name = $scope.EditCustomer.Name;  
  87. $scope.Category= $scope.EditCustomer.Category;  
  88. $scope.EditIndex = index;  
  89. alert($scope.EditCustomer);  
  90. }  
  91. $scope.Update = function (index) {  
  92. alert("updated");  
  93. //Find the record using Index from Array.  
  94. $scope.EditCustomer.Name = $scope.Name;  
  95. $scope.EditCustomer.Category = $scope.Category.CategortName;  
  96. $scope.Customers[index] = $scope.EditCustomer;  
  97. alert($scope.EditCustomer);  
  98. $scope.Name = "";  
  99. $scope.Category = "";  
  100. }  
  101. $scope.reset = function () {  
  102. $scope.Name = "";  
  103. $scope.Category = "";  
  104. }  
  105. });  
  106. </script>  
  107. <div ng-app="MyApp" ng-controller="MyController">  
  108. <table cellpadding="0" cellspacing="0">  
  109. <tr>  
  110. <th>Name</th>  
  111. <th>Category</th>  
  112. <th> </th>  
  113. </tr>  
  114. <tbody ng-repeat="m in Customers">  
  115. <tr>  
  116. <td>{{m.Name}}</td>  
  117. <td>{{m.Category}}</td>  
  118. <td><input type="button" ng-click="edit($index)" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#popup2" value="edit" /></td>  
  119. <td>  
  120. <input type="button" ng-click="Remove($index)" value="Remove" />  
  121. </td>  
  122. </tr>  
  123. </tbody>  
  124. <tfoot>  
  125. <tr>  
  126. <td><input type="text" ng-model="Name" /></td>  
  127. <td>  
  128. <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">  
  129. <option value="">Select Category</option>  
  130. </select>  
  131. </td>  
  132. <td><input type="button" ng-click="Add()" value="Add" /></td>  
  133. </tr>  
  134. </tfoot>  
  135. </table>  
  136. <div class="modal fade" id="popup2" role="dialog">  
  137. <div class="modal-dialog modal-lg">  
  138. <div class="modal-content">  
  139. <div class="modal-header">  
  140. <button type="button" class="close" data-dismiss="modal">×</button>  
  141. <h4 class="modal-title">Modal Header</h4>  
  142. </div>  
  143. <div class="modal-body">  
  144. <div class="s2vk-container">  
  145. <div class="row">  
  146. <div class="col-md-8">  
  147. <div class="panel panel-default" ng-model="EditCustomer">  
  148. <table class="table table-condensed">  
  149. <thead>  
  150. <tr style="padding-left:10px; padding-right:10px;" class="active">  
  151. <th class="thick-line" style="padding-left:10px; padding-right:20px; padding-top:6px; padding-bottom:6px;">Name</th>  
  152. <th style="padding-left:10px; padding-right:10px;" class="thick-line">Category</th>  
  153. <th style="padding-left:10px; padding-right:10px;" class="thick-line">Action</th>  
  154. </tr>  
  155. <tr>  
  156. <td><input type="text" value="{{EditCustomer.Name}}" ng-model="Name" /></td>  
  157. <td>  
  158. <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">  
  159. <option value="">Select Category</option>  
  160. </select>  
  161. </td>  
  162. <td>  
  163. <button type="button" class="btn btn-sm btn-primary" ng-click="Update()">Update</button>  
  164. <button type="button" class="btn btn-sm btn-danger" ng-click="reset()">cancel</button>  
  165. </td>  
  166. </tr>  
  167. </thead>  
  168. </table>  
  169. </div>  
  170. </div>  
  171. </div>  
  172. </div>  
  173. </div>  
  174. <div class="modal-footer">  
  175. <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="reset()">Close</button>  
  176. </div>  
  177. </div>  
  178. </div>  
  179. </div>  
  180. </div>  
  181. </body>  
  182. </html>  

Answers (5)