TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Mahesh Reddy
NA
363
16.9k
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
<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) {
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 =
""
;
}
});
</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>
Reply
Answers (
5
)
Real Time Live Project Scenario of using Cursors - MYSQL
Conversion of html page to image in asp.net mvc