Hi,
I have a few questions regarding previous sample in Add row to HTML Table with dependent DropDownList using AngularJS in ASP.Net MVC
1. Why every time i choose the quantity = 1 in the table it keep show the quantity is 0?
2. I want to remove the table as in the image above using JavaScript but it didn't work
<div class="table" id="table_id">
<table id="tblMaterials" class="table table-striped table-bordered" style="width:50%">
<thead>
<tr>
<th class="text-center">Material</th>
<th class="text-center">Quantity</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody ng-repeat="m in Materials">
<tr>
<td class="text-center">{{m.Material}}</td>
<td class="text-center">{{m.Quantity}}</td>
<td class="text-center">Remove</td>
</tr>
</tbody>
</table>
<script>
var index, table = document.getElementById('table_id');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].cells[2].onclick = function () {
var c = confirm("do you want to delete this row");
if (c === true) {
index = this.parentElement.rowIndex;
table.deleteRow(index);
}
};
}
</script>
3. In the dropdown, if i choose the material that have no quantity it should display alert message instead of adding the material in the table. How to do that? i made some changes in the code
<script type="text/javascript">
$(function () {
$('#btnSave').on('click', function () {
var material = {};
material.req_name = $('#req_name').val();
material.badge_num = $('#badge_num').val();
material.line = $('#line').val();
material.remark = $('#remark').val();
var materials = new Array();
$("#tblMaterials TBODY TR:has(td)").each(function () {
var row = $(this);
var material = {};
material.MaterialName = row.find("TD").eq(0).html().trim();
material.Quantity = row.find("TD").eq(1).html().trim();
materials.push(material);
});
material.MaterialDetails = materials;
//Send the JSON array to Controller using AJAX.
$.ajax({
type: "POST",
url: '@Url.Action("AddDetail", "Home")',
data: JSON.stringify(material),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
}
});
});
});
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 : (alert("Material is not available!")); /// I made this changes but nothing happen and it update the table
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;
var qty = ddl[0].value;
var ddlddlQuantities = angular.element(document.getElementById('ddlQuantity'));
ddlddlQuantities.empty();
for (var i = 1; i <= qty; i++) {
var option = document.createElement("OPTION");
option.innerHTML = i;
option.value = i;
ddlddlQuantities[0].options.add(option);
}
};
});
</script>
