mahesh213 says:
for (var i = 0; i < $scope.products.length; i++) {
if ($scope.products[i].ProductName == $scope.EditCustomer.Product) {
index1 = i;
}
}
Problem is in this line of code. Since you are not assigning $scope.products in edit click you are getting error on for loop and the code breaks. So the value not set here.
Inorder to set the value you need to first populate the Products and then from the $scope.products set the index1 value to the $scope.Product.
Check the below example or modify your code accordingly.
Controller
public class invoiceController : Controller
{
// GET: /invoice/
MasterEntities db = new MasterEntities();
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult GetCategories()
{
List<Category> coun = new List<Category>();
coun.Add(new Category { CategoryID = 1, CategortName = "apple" });
coun.Add(new Category { CategoryID = 2, CategortName = "Lenovo" });
return Json(coun, JsonRequestBehavior.AllowGet);
}
//Product
[HttpGet]
public ActionResult GetProducts()
{
List<Product> coun = new List<Product>();
coun.Add(new Product { ProductId = 1, ProductName = "samsung" });
coun.Add(new Product { ProductId = 2, ProductName = "LPG" });
return Json(coun, JsonRequestBehavior.AllowGet);
}
//Display values on Grid View
public JsonResult getAll()
{
List<Orders> employeeList = new List<Orders>();
employeeList.Add(new Orders { OrderId = 1, OrderName = "mahesh", CategoryID = 1 });
employeeList.Add(new Orders { OrderId = 2, OrderName = "rahul", CategoryID = 2 });
var JsonResult = Json(employeeList, JsonRequestBehavior.AllowGet);
return JsonResult;
}
[HttpPost]
public ActionResult Edit(int orderID)
{
List<Product1> employeeList = new List<Product1>();
employeeList.Add(new Product1 { RAI_Id = 1, OrderId = 1, CategoryID = 1, CategortName = "apple", ProductID = 1, ProductName = "samsung" });
employeeList.Add(new Product1 { RAI_Id = 2, OrderId = 1, CategoryID = 2, CategortName = "Lenovo", ProductID = 2, ProductName = "LPG" });
employeeList.Add(new Product1 { RAI_Id = 1, OrderId = 2, CategoryID = 2, CategortName = "Lenovo", ProductID = 2, ProductName = "LPG" });
employeeList.Add(new Product1 { RAI_Id = 2, OrderId = 2, CategoryID = 1, CategortName = "apple", ProductID = 1, ProductName = "samsung" });
var result = employeeList.Where(x => x.OrderId == orderID);
return Json(result, JsonRequestBehavior.AllowGet);
}
}
public class Category
{
public int CategoryID { get; set; }
public string CategortName { get; set; }
}
public class Product1
{
public int OrderId { get; set; }
public int ProductID { get; set; }
public string ProductName { get; set; }
public int CategoryID { get; set; }
public string CategortName { get; set; }
public int RAI_Id { get; set; }
}
public class Product
{
public int ProductId { get; set; }
public string ProductName { get; set; }
}
public class Orders
{
public int OrderId { get; set; }
public string OrderName { get; set; }
public DateTime OrderDate { get; set; }
public string Description { get; set; }
public int CategoryID { get; set; }
}
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css"
rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.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/select2/4.0.2-rc.1/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="../../dirPagination.js" type="text/javascript"></script>
<script>
var app = angular.module('invoice', ['angularUtils.directives.dirPagination', 'ngAnimate', 'ui.bootstrap']);
app.controller('InvoiceController', ['$scope', '$http', '$window', 'RegistrationService', function ($scope, $http, $window, RegistrationService) {
$scope.OrderDate = new Date();
$scope.invoice = false;
$scope.EditCustomer;
$scope.EditIndex;
function GetProduct() {
$scope.products = [];
$http({
method: 'Get',
url: '/invoice/GetProducts/'
}).success(function (data, status, headers, config) {
$scope.products = data;
var index1;
for (var i = 0; i < $scope.products.length; i++) {
if ($scope.products[i].ProductName == $scope.EditCustomer.Product) {
index1 = i;
}
}
$scope.Product = $scope.products[index1];
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.edit = function (index) {
GetProduct()
//$scope.parentrow =true;
//Find the record using Index from Array.
$scope.EditCustomer = $scope.myData[index];
$scope.id = $scope.EditCustomer.id;
//$scope.Category = $scope.EditCustomer.Category;
$scope.Category = $scope.EditCustomer.CategoryID;
//$scope.Product = $scope.EditCustomer.Product;
$scope.Product = $scope.EditCustomer.ProductID;
$scope.CategortName = $scope.EditCustomer.Category;
$scope.ProductName = $scope.EditCustomer.Product;
$scope.EditIndex = index;
var index;
var index1;
for (var i = 0; i < $scope.categories.length; i++) {
if ($scope.categories[i].CategortName == $scope.EditCustomer.Category) {
index = i;
}
}
$scope.Category = $scope.categories[index];
}
//update code for Item row
$scope.Update = function (index) {
//Find the record using Index from Array.
$scope.EditCustomer.Category = $scope.Category.CategortName;
$scope.EditCustomer.Product = $scope.Product.ProductName;
$scope.EditCustomer.CategoryID = $scope.Category.CategoryID;
$scope.EditCustomer.ProductID = $scope.Product.ProductID;
$scope.myData[index] = $scope.EditCustomer;
//clear the fields
$scope.Category = "";
$scope.Product = "";
}
//clear fiedls in item row
$scope.reset = function () {
$scope.Category = "";
$scope.Product = "";
}
GetAllEmployees();
//category
GetCategory();
function GetCategory() {
$scope.categories = [];
$http({ method: 'Get', url: '/invoice/GetCategories/' }).success(function (data, status, headers, config) {
$scope.categories = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
//product
$scope.GetProducts = function () {
var countryId = $scope.Category.CategoryID;
if (countryId) {
$http({
method: 'Get',
url: '/invoice/GetProducts/'
}).success(function (data, status, headers, config) {
$scope.products = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
else {
$scope.products = null;
}
}
$scope.ShowHide = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.invoice = $scope.invoice ? false : true;
}
$scope.IsVisible = true;
//To Get All Records
function GetAllEmployees() {
var getData = RegistrationService.getEmployees();
getData.then(function (emp) {
$scope.employees = emp.data;
}, function (emp) {
alert("Records gathering failed!");
});
}
$scope.myData = [];
// Add functionality for Items
$scope.add = function () {
$scope.myData.push({
id: $scope.myData.length + 1,
Product: $scope.Product.ProductName,
ProductID: $scope.Product.ProductID,
Category: $scope.Category.CategortName,
CategoryID: $scope.Category.CategoryID
});
//Clear the TextBoxes.
$scope.Id = "";
$scope.Product = "";
$scope.Category = "";
};
$scope.mahesh = true;
$scope.getIndex = 0;
$scope.istrue = true;
//Edit code for Items and Orders
$scope.Edit = function (OrderId) {
$scope.invoice = true;
//$scope.invoice = $scope.invoice ? false : true;;
var id = OrderId;
//var id = $scope.employees[index].OrderId;
$.post("/invoice/Edit/", { orderID: id }, function (r) {
$scope.myData = [];
for (var i = 0; i < r.length; i++) {
var customer = {};
var itemId = r[i].RAI_Id;
customer.id = itemId;
customer.ProductID = r[i].ProductID;
customer.Product = r[i].ProductID;
customer.Product = r[i].ProductName;
customer.CategoryID = r[i].CategoryID;
customer.Category = r[i].CategoryID;
customer.Category = r[i].CategortName;
$scope.myData.push(customer);
}
$scope.$apply();
});
$scope.Product = "";
$scope.Category = "";
}
} ]);
app.service("RegistrationService", function ($http) {
//get All Employee
this.getEmployees = function () {
return $http.get("/invoice/getAll");
};
});
</script>
</head>
<body>
<div class="container" ng-app="invoice" ng-controller="InvoiceController">
<div ng-show="invoice">
<div id="dvContainer">
<div class="s2vk-container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<table class="table table-condensed">
<thead>
<tr>
<th>
SNo
</th>
<th>
Category
</th>
<th>
Product
</th>
<th>
</th>
</tr>
</thead>
<tbody style="padding-left: 20px; padding-right: 20px;" ng-model="myData1" ng-repeat="invoice in myData track by $index">
<tr>
<td>
{{invoice.id}}
</td>
<td>
{{invoice.Category}}
</td>
<td>
{{invoice.Product}}
</td>
<td>
<button class="btn btn-info btn-sm" ng-click="edit($index);" data-toggle="modal"
data-target="#popup2">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr style="padding-left: 20px; padding-right: 20px;" ng-show="mahesh">
<td ng-model="Id">
{{$index+1}}
</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>
<select select2="" ng-model="Product" ng-disabled="!products" name="ProductName"
class="input-sm form-control" ng-options="s as s.ProductName for s in products">
<option value="">-- Select Product --</option>
</select>
</td>
<td>
<button type="button" ng-show="mahesh" class="btn btn-success btn-sm" ng-click="add()">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<!-- Modal -->
</div>
<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" align="Center">
Item Details</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 class="thick-line" style="padding-left: 20px; padding-right: 20px; padding-top: 6px;
padding-bottom: 6px;">
SNo
</th>
<th style="padding-left: 20px; padding-right: 20px;" class="thick-line">
Category
</th>
<th style="padding-left: 20px; padding-right: 20px;" class="thick-line">
Product
</th>
<th style="padding-left: 10px; padding-right: 10px;" class="thick-line">
Action
</th>
</tr>
<tr>
<td>
{{$index+1}}
</td>
<td>
<select class="input-sm form-control" select2="" name="CategortName" ng-model="Category"
ng-change="GetProducts()" 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>
<select class="input-sm form-control" ng-disabled="!products" select2="" name="ProductName"
ng-model="Product" value="{{EditCustomer.Product}}" containercssclass="all" ng-options="c as c.ProductName for c in products">
<option value="">Select Product</option>
</select>
</td>
<td>
<button class="btn btn-info btn-sm" ng-click="Update()">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button type="button" class="btn btn-danger btn-sm" ng-click="reset()" readonly>
<span class="glyphicon glyphicon-remove-sign"></span>
</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>
<button class="btn btn-success btn-sm " ng-click="ShowHide();" style="margin-left: 15px;">
<span class="glyphicon glyphicon-plus"></span>Add Order</button>
<hr style="width: 550px;" />
<div class="table-responsive " style="overflow-x: auto;">
<table id="dvData" cellpadding="12" class="table table-bordered table-hover table-striped"
style="margin-left: 20px; margin-right: 20px;">
<tr class="success">
<th>
Order Id
</th>
<th style="cursor: pointer;" ng-click="sort('OrderName')">
<b>Order Name</b> <span class="glyphicon sort-icon" ng-show="sortKey=='OrderName'"
ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"
re></span>
</th>
<th style="cursor: pointer;">
<b>Actions</b> <span class="glyphicon sort-icon"></span>
</th>
</tr>
<tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:10"
ng-model="search">
<td>
{{employee.OrderId}}
</td>
<td>
{{employee.OrderName}}
</td>
<td>
<button type="button" ng-click="Edit(employee.OrderId)" readonly>
Edit
</button>
</td>
</tr>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true">
</dir-pagination-controls>
</div>
</div>
</body>
</html>
Screenshot
