Hi,
change event is not working on edit functionality
while adding change funnctionality is working
Could please any body help me
@{
Layout = null;
}
<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 type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/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, $http, $window) {
$scope.EditCustomer;
$scope.EditIndex;
$scope.Customers = [];
GetCategory();
function GetCategory() {
$scope.categories = [];
$http({
method: 'Get',
url: '/autocomplete/GetCategories/',
}).success(function (data, status, headers, config) {
$scope.categories = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.GetProducts = function () {
var countryId = $scope.Category.CategoryID;
var data = { "CategoryID": countryId };
var config = {
params: data,
headers: { 'Accept': 'application/json' }
};
if (countryId) {
$http.get("/autocomplete/GetProducts/'", config)
.then(function (data, status, headers, config) {
$scope.products = data.data;
}, function (response) {
alert(response.responseText);
});
}
else {
$scope.products = null;
}
}
$scope.Add = function () {
//Add the new item to the Array.
var customer = {};
customer.Category = $scope.Category.CategortName;
customer.Product = $scope.Product.ProductName;
$scope.Customers.push(customer);
//Clear the TextBoxes.
$scope.Category = "";
$scope.Product = "";
};
$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) {
GetCategory();
//$scope.parentrow =true;
//Find the record using Index from Array.
$scope.EditCustomer = $scope.Customers[index];
$scope.Category = $scope.EditCustomer.Category;
$scope.CategoryIs = $scope.EditCustomer.Category;
$scope.Product = $scope.EditCustomer.Product;
$scope.ProductIs = $scope.EditCustomer.Product;
//$scope.Orders = $scope.EditCustomer.Orders;
//$scope.EditCustomer = $scope.Customers[index];
$scope.EditIndex = index;
alert($scope.EditCustomer);
}
$scope.Update = function (index) {
//$scope.parentrow = false;
alert("updated");
//Find the record using Index from Array.
$scope.EditCustomer.Category = $scope.CategoryIs;
$scope.EditCustomer.Product = $scope.ProductIs;
$scope.EditCustomer.Product = $scope.Product.ProductName;
$scope.Customers[index] = $scope.EditCustomer;
//$scope.Orders[index] = $scope.EditCustomer;
alert($scope.EditCustomer);
$scope.Category = "";
$scope.Product = "";
}
$scope.reset = function () {
$scope.Category = "";
$scope.Product = "";
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Category</th>
<th>Product</th>
<th> </th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>{{m.Category}}</td>
<td>{{m.Product}}</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>
<select class="form-control input-sm" 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>
<select select2="" ng-model="Product" ng-disabled="!products"
class="form-control input-sm" ng-options="s as s.ProductName for s in products">
<option value="">-- Select Product --</option>
</select>
</td>
<td><input type="button" ng-click="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
<div class="modal fade" id="popup2" role="dialog" @*ng-show="parentrow"*@>
<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" style="overflow-x:scroll">
<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 style="padding-left:10px; padding-right:10px;" class="thick-line">Category</th>
<th style="padding-left:10px; padding-right:10px;" class="thick-line">Product</th>
@*<th style="padding-left:10px; padding-right:10px;" class="thick-line"></th>*@
<th style="padding-left:10px; padding-right:10px;" class="thick-line">Action</th>
</tr>
<tr>
<td>
<select ng-model="CategoryIs" class="input-sm form-control" select2="" style="width:120px" ng-change="GetProducts()">
<option value="0">Please Select</option>
<option ng-repeat="cat in categories" value="{{cat.CategortName}}"
ng-selected="cat.CategortName == EditCustomer.Category">
{{cat.CategortName}}
</option>
</select>
</td>
<td>
<select ng-model="ProductIs" class="input-sm form-control" select2="" style="width:120px">
<option value="0">Please Select</option>
<option ng-repeat="cat in products" value="{{cat.ProductName}}"
ng-selected="cat.ProductName == EditCustomer.Product">
{{cat.ProductName}}
</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>
Controller
...............................
[HttpGet]
public ActionResult GetCategories()
{
db.Configuration.ProxyCreationEnabled = false;
var coun = db.Categories.Select(model => new { model.CategoryID, model.CategortName }).ToList();
return Json(coun, JsonRequestBehavior.AllowGet);
}
[HttpGet]
public ActionResult GetProducts(int? CategoryID)
{
db.Configuration.ProxyCreationEnabled = false;
var coun = db.Products.Where(model => model.ProductID == CategoryID).Select(model => new { model.ProductID, model.ProductName }).ToList();
return Json(coun, JsonRequestBehavior.AllowGet);
}