I have created a table which displays units, amounts , checkbox1forunits , checkbox2foramounts , input. the table has four records. the value of units and amounts come from the json array.
I want to set the max of input box based on the selected checkbox. for each input box there is different max value. if checkbox1forunits is selected then set max of input box to the corresponding given unit. if checkbox2foramounts is selected then set max of input box to the corresponding given amount.
please suggest me what condition should I write to achieve this. I am understanding the logic but getting difficulty writing it in angular js.the code is given below.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="//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) {
$scope.IsVisible = false;
$scope.GenerateTable = function () {
$scope.Customers = [
{unit: 100, amount: 1000},
{ unit: 200,amount: 2000},
{unit: 300,amount: 3000},
{ unit: 400,amount: 4000}
];
$scope.IsVisible = true;
};
});
app.directive("limitToMax", function() {
return {
link: function(scope, element, attributes) {
element.on("keydown keyup", function(e) {
if (Number(element.val()) > Number(attributes.max) &&
e.keyCode != 46 // delete
&&
e.keyCode != 8 // backspace
) {
scope.val=true;
e.preventDefault();
element.val(attributes.max);
}
});
}
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Generate Table" ng-click="GenerateTable()" />
<hr />
<table cellpadding="0" cellspacing="0" ng-show="IsVisible">
<tr>
<th>Unit</th>
<th>Amount</th>
<th>Checkbox1</th>
<th>Checkbox2</th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td></td>
<td></td>
<td><input type="checkbox"ng-model="checkbox1[$m]"</td>
<td><input type="checkbox"ng-model="checkbox2[$m]"</td>
<td><input type="number" ng-model="myVar[$m]" min="1" max="" limit-to-max /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire