(function() {
'use strict';
var app = angular.module('plunker', ["angular-toArrayFilter", "kendo.directives"]);
app.controller('MainCtrl', function() {
});
app.component('magicTable', {
templateUrl: 'magicTable.template.html',
controller: function($element, $timeout) {
var ctrl = this;
ctrl.header = {
4 : {val: 16, enabled:false},
3 : {val: 8, enabled:false},
2 : {val: 4, enabled:false},
1 : {val: 2, enabled:false},
0 : {val: 1, enabled:false},
};
ctrl.data = [
[26,9,7,6,25],
[24,10,23,19,15],
[18,29,6,3,29],
[28,11,20,22,27],
[21,14,21,30,13],
[29,13,22,7,11],
[27,27,5,23,7],
[17,15,15,26,21],
[20,28,28,10,19],
[19,12,29,15,17],
[22,24,30,18,9],
[23,30,14,14,5],
[30,25,13,11,3],
[25,26,12,27,23],
[16,8,4,2,1]
];
ctrl.result = 0;
ctrl.resetInput = function() {
angular.forEach(ctrl.header, function(header, key) {
header.enabled = false;
ctrl.result = 0;
});
};
ctrl.updateHeader = function(kendoEvent) {
for (var i = 0; i < 5; i++){
ctrl.header[i].binary = (kendoEvent.value >> i) & 1;
ctrl.header[i].enabled = ctrl.header[i].binary == 1;
}
};
ctrl.findResult = function() {
var sum = 0;
angular.forEach(ctrl.header, function(header, key) {
if (header.enabled){
sum = sum + header.val;
}
});
ctrl.result = sum;
};
ctrl.findResultDetail = function() {
var nums = [];
var sum = 0;
angular.forEach(ctrl.header, function(header, key) {
if (header.enabled){
nums.push(header.val);
sum = sum + header.val;
}
});
ctrl.result = sum;
ctrl.resultDetail = nums.join(" + ") + " = " + sum;
};
},
bindings: {}
});
})();
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css" />
<link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//github.hubspot.com/tether/dist/js/tether.js"></script>
<script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.4.9"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.ui.core.min.js"></script>
<script src="app.js"></script>
<script src="angularjs-toArrayFilter.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<magic-table></magic-table>
</body>
</html>
/* Put your css in here */
/*table.magic
{
width : 70%;
}*/
tr {
line-height: 10px;
min-height: 10px;
height: 10px;
}
.resetButton {
float: right
}
.findButton {
float: left
}
.k-slider-horizontal {
width:100%;
}
<html>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<table class='table table-condensed table-bordered magic'>
<thead>
<tr>
<td ng-repeat="header in $ctrl.header | toArray | orderBy:'-val'">
<input type="checkbox" ng-model="header.enabled">
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in $ctrl.data">
<td ng-repeat="col in row track by $index">
<div >{{col}}</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="well">
<div class="col-sm-2">
<button type="button" class="btn btn-primary" ng-click="$ctrl.findResultDetail()">How ?</button>
</div>
<div class="col-sm-7">
<h5 class="text-success" ng-show="$ctrl.result > 0">Number in your mind is: {{$ctrl.resultDetail}}</h5>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default" ng-click="$ctrl.resetInput()">Reset</button>
</div>
</div>
</div>
</div>
</body>
</html>
angular.module('angular-toArrayFilter', [])
.filter('toArray', function () {
return function (obj, addKey) {
if (!(obj instanceof Object)) {
return obj;
}
if ( addKey === false ) {
return Object.values(obj);
} else {
return Object.keys(obj).map(function (key) {
return Object.defineProperty(obj[key], '$key', { enumerable: false, value: key});
});
}
};
});