Hi,
based upon category i am going to change product value
Currently i am going to do it on dynamically added rows
after pushing values into array display what ever values i enter on row display it on array
before pushing values to array change event is working properly
after pushing values to array if i have done any cahnges in category
product value is not changing
If i done any changes in catgory(any row) it was effecting product values on all rows
could you please help me
@{
Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<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" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
$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 () {
debugger;
var stateId = $scope.Category;
if (stateId) {
$http({
method: 'POST',
url: '/autocomplete/GetProducts/',
data: JSON.stringify({ CategoryID: stateId })
}).success(function (data, status, headers, config) {
$scope.products = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
else {
$scope.products = null;
}
}
$scope.Add = function () {
debugger;
var customer = {};
$scope.Customers.push({
Name: $scope.Name,
Category: $scope.Category,
Product: $scope.Product,
});
$scope.Name = "";
$scope.Category = "";
$scope.Product = "";
};
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<th>Name</th>
<th>
Category
</th>
<th>
Product
</th>
<th>
Action
</th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>
<input type="text" ng-model="m.Name" class="form-control" />
<td>
<select class="input-sm form-control" select2="" name="CategortName" ng-model="m.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="m.Product" ng-disabled="!products"
class="input-sm form-control" ng-options="s as s.ProductName for s in products">
<option value="">-- Select Product --</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input type="text" ng-model="Name" class="input-sm form-control" />
</td>
<td>
<select class="input-sm form-control" select2="" name="CategortName" ng-model="Category" containerCssClass="all" ng-change="GetProducts()" ng-options="c.CategoryID 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="input-sm form-control" ng-options="s.ProductID as s.ProductName for s in products">
<option value="">-- Select Product --</option>
</select>
</td>
<td>
<input type="button" class="btn btn-primary" ng-click="Add()" value="Add" />
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
