<html>
<head>
<title>Tables</title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script src="../Scripts/angular.js"></script>
<script type="text/javascript">
var app = angular.module("tablesApp", []);
app.controller("appController", function ($scope) {
$scope.count = 12;
$scope.num = 9;
$scope.eval = function (count, num) {
$scope.arr = [];
for (var i = 1; i <= count; i++) {
$scope.arr.push(num * i);
}
return $scope.arr;
};
$scope.Counter1 = function (i, number) {
return i / number;
};
}
);
</script>
</head>
<body ng-app="tablesApp">
<div ng-controller="appController" ng-clear>
Count: <input id="Text1" type="number" min="0" ng-model="count" />
Number: <input id="Text2" type="number" min="1" ng-model="num" /><br />
Value Of Count entered<div>{{count}}</div><br />
Value Of Number entered<div>{{num}}</div><br />
<div ng-repeat="n in eval(count,num) track by $index">
{{num}}*{{Counter1(n,num)}}={{n}} ---- {{$index+1}}
</div>
</div>
</body>
</html>
Another way of doing, this also gives the same output
<html>
<head>
<title>Tables</title>
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script src="../Scripts/angular.js"></script>
<script type="text/javascript">
var app = angular.module("tablesApp", []);
app.controller("appController", function ($scope) {
$scope.count = 5;
$scope.num = 9;
$scope.eval = function (count, num) {
$scope.arr = [];
for (var i = 1; i <= count; i++) {
var valueToPush = [];
valueToPush['Counter'] = i;
valueToPush['Multip_Value'] = num * i;
$scope.arr.push(valueToPush);
}
return $scope.arr;
};
});
</script>
</head>
<body ng-app="tablesApp">
<div ng-controller="appController">
Count: <input id="Text1" type="number" min="0" ng-model="count" />
Number: <input id="Text2" type="number" min="1" ng-model="num" /><br />
Value Of Count entered<div>{{count}}</div><br />
Value Of Number entered<div>{{num}}</div><br />
<div ng-repeat="n in eval(count,num) track by $index">
{{num}} X {{n['Counter']}} = {{n['Multip_Value']}}
</div>
</div>
</body>
</html>
UI: How it works
Both Count and Number can be changed dynamically to display the multiplication table.
Useful
ReplyDeleteLooks good! Next i would add the ability to select your operator ( *, /, +, - )
ReplyDeleteExpected to form you a next to no word to thank you once more with respect to the decent recommendations you've contributed here. Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition. We are providing AngularJs training in velachry.
ReplyDeleteFor more details: AngularJs training in velachery
With each new innovation hitting the business sectors, there are various upsides and downsides that touch base with them. Essentially there are various advantages that accompanied an online logical number crunchers.
ReplyDeletepartial fractions