Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult GetCategories()
{
List<Category> categories = new List<Category>();
categories.Add(new Category { CategoryID = 1, CategoryName = "a" });
categories.Add(new Category { CategoryID = 2, CategoryName = "b" });
categories.Add(new Category { CategoryID = 3, CategoryName = "c" });
categories.Add(new Category { CategoryID = 4, CategoryName = "d" });
return Json(categories, JsonRequestBehavior.AllowGet);
}
public JsonResult GetProducts(int? catID)
{
List<Product> products = new List<Product>();
products.Add(new Product { PId = 1, PName = "e" });
products.Add(new Product { PId = 2, PName = "f" });
products.Add(new Product { PId = 3, PName = "g" });
products.Add(new Product { PId = 4, PName = "h" });
if (catID == 1)
{
products = products.Where(x => x.PId == 1 || x.PId == 2 || x.PId == 3).ToList();
}
else if (catID == 2)
{
products = products.Where(x => x.PId == 2 || x.PId == 4).ToList();
}
return Json(products, JsonRequestBehavior.AllowGet);
}
public class Category
{
public int CategoryID { get; set; }
public string CategoryName { get; set; }
}
public class Product
{
public int PId { get; set; }
public string PName { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
app.controller('MyController', function ($scope, $http, $window) {
$scope.Details = [{ CName: "Item1" }, { CName: "Item2" }];
GetCategory();
function GetCategory() {
$scope.categories = [];
$http({
method: 'Get',
url: '/Home/GetCategories/'
}).success(function (data, status, headers, config) {
$scope.categories = data;
GetProducts();
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
function GetProducts(category) {
$scope.products = [];
$http({
method: 'Get',
url: '/Home/GetProducts/',
params: { catID: category }
}).success(function (data, status, headers, config) {
$scope.products = data;
for (var i = 0; i < $scope.Details.length; i++) {
if ($scope.Item == undefined) {
$scope.Details[i].products = $scope.products;
}
if ($scope.Details[i].CName == $scope.Item) {
$scope.Details[i].products = $scope.products;
break;
}
}
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.GetProductsByCat = function (category, name) {
$scope.Item = name;
GetProducts(category);
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Category</th>
<th>Product</th>
</tr>
<tbody ng-repeat="detail in Details">
<tr>
<td>{{detail.CName}}</td>
<td>
<select class="input-sm form-control" select2="" name="CategortName" ng-model="detail.Category"
containercssclass="all" ng-change="GetProductsByCat(detail.Category,detail.CName)"
ng-options="c.CategoryID as c.CategoryName for c in categories" ng-disabled="disabled">
<option value="">Select Category</option>
</select>
</td>
<td>
<select class="input-sm form-control" select2="" ng-model="detail.Product"
containercssclass="all" ng-options="c.PID as c.PName for c in detail.products">
<option value="">Select Product</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Screenshot
