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" });
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://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http) {
$scope.Details = [{ CName: "Item1" }, { CName: "Item2" }];
GetCategory();
GetProducts();
function GetCategory() {
$scope.categories = [];
$http({
method: 'Get',
url: '/Home/GetCategories/'
}).success(function (data, status, headers, config) {
$scope.categories = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
function GetProducts() {
$scope.products = [];
$http({
method: 'Get',
url: '/Home/GetProducts/'
}).success(function (data, status, headers, config) {
$scope.products = data;
for (var i = 0; i < $scope.Details.length; i++) {
$scope.Details[i].products = $scope.products;
$scope.Details[i].Product = "";
}
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.GetProductsByCat = function (category, name) {
$scope.ProductDetails = [];
if (category == 1) {
$scope.ProductDetails.push($scope.products[0]);
$scope.ProductDetails.push($scope.products[1]);
$scope.ProductDetails.push($scope.products[2]);
} else if (category == 2) {
$scope.ProductDetails.push($scope.products[1]);
$scope.ProductDetails.push($scope.products[3]);
} else {
$scope.ProductDetails = $scope.products;
}
for (var i = 0; i < $scope.Details.length; i++) {
if ($scope.Details[i].CName == name) {
if (category == undefined) {
$scope.Details[i].products = $scope.products;
} else {
$scope.Details[i].products = $scope.ProductDetails;
$scope.Details[i].Product = "";
}
break;
}
}
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<div class="container">
<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>
</div>
</body>
</html>
Screenshot
