Hi,
How to add row using Dependent DropDownList in ASP.Net MVC AngularJS
Meaning that I want the quantity dropdown dependent on material dropdown and on the same time, after click add material then the material will be added without save it into database.
These are based on previous sample on
I tried combined two code but it keep getting 0 as quantity after i click Add Material button
<script type="text/javascript">
$(function () {
$("#ddlMaterial").change(function () {
var value = 0;
if ($(this).val() != "") {
value = $(this).val();
}
var obj = {};
obj.id = value;
$.ajax({
type: "POST",
// url: "/MaterialRequest/Home/GetQuantity",
url: '@Url.Action("GetQuantity", "Home")',
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var ddlddlQuantities = $("#ddlQuantity");
ddlddlQuantities.empty();
for (var i = 1; i <= response; i++) {
var option = $("<option />");
option.html(i);
option.val(i);
ddlddlQuantities.append(option);
}
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $filter, $document) {
$scope.Materials = [];
$scope.materialValue = "0";
$scope.quantity = "0";
$scope.Add = function () {
var material = {};
if ($scope.material != "Select" && $scope.material != "") {
material.Material = $scope.material;
material.Quantity = $scope.quantity != undefined ? $scope.quantity : 0;
var materialExist = $filter('filter')($scope.Materials, { Material: $scope.material }, true);
if (materialExist.length > 0) {
for (var i = 0; i < $scope.Materials.length; i++) {
if ($scope.Materials[i].Material == $scope.material) {
if ($scope.quantity != undefined) {
$scope.Materials[i].Quantity = parseInt($scope.Materials[i].Quantity) + parseInt($scope.quantity);
}
break;
}
}
} else {
$scope.Materials.push(material);
}
}
};
$scope.material = '';
$scope.setMaterialName = function () {
var ddl = angular.element(document.getElementById('ddlMaterial'));
$scope.material = ddl[0].options[ddl[0].options.selectedIndex].text;
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<td>Material</td>
<td>
<select id="ddlMaterial" ng-model="materialValue" ng-change="setMaterialName()">
<option value="0">Select</option>
@foreach (var item in ViewBag.material)
{
<option value='@item.ID'>@item.Material</option>
}
</select>
</td>
<td>Quantity</td>
<td>
<select id="ddlQuantity" ng-model="quantity">
<option value="0">Select</option>
@{
for (int i = 1; i <= 100; i++)
{
<option value="@i">@i</option>
}
}
</select>
</td>
<td><input type="submit" value="Add Material" ng-click="Add()" /></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<th>Material</th>
<th>Quantity</th>
</tr>
<tbody ng-repeat="m in Materials">
<tr>
<td>{{m.Material}}</td>
<td>{{m.Quantity}}</td>
</tr>
</tbody>
</table>
</div>
