<body ng-app>
<div id="counter" ng-controller="counterCntl">
<p>
<span>合計</span><span>{{total}}</span>
<span><input class="checklabelipt" type="checkbox" id="counter_chk" ng-model="counter_show"><label for="counter_chk" class="checklabel"><i class="fas fa-check"></i>カウント</label></span>
<span><input class="checklabelipt" type="checkbox" id="subt_chk" ng-model="subt_show"><label for="subt_chk" class="checklabel"><i class="fas fa-check"></i>小計</label></span>
<span><input class="checklabelipt" type="checkbox" id="parcent_chk" ng-model="parcnt_show"><label for="parcent_chk" class="checklabel"><i class="fas fa-check"></i>割合</label></span>
</p>
<p ng-repeat="counter in counters">
<input class="w-6em" ng-model="counter.name" type="text" placeholder="カウントしたいもの"/>
<input class="w-6em" ng-change="inputTanka(this)" ng-model="counter.tanka" type="text" placeholder="カウント@"/>
<button ng-click="countup(this)" type="button""><i class="fas fa-plus"></i></button>
<span ng-show="counter_show" class="counter_num">{{counter.count}}</span>
<span ng-show="subt_show" class="subtotal_num"><span class="vallabel">*@</span>{{counter.subtotal}}</span>
<span ng-show="parcnt_show" class="parcent_num">{{counter.parcent}}<span class="vallabel">％</span></span>
</p>
<button class="addline" ng-click="addCounter()">行を追加する</button>
</div>
</body>
:root{
--primary_blue:#00acc1;
--primary_blue_lite:#d7ccc8;
--primary_pink:#f06292;
--primary_pink_lite:#efbbcf;
--base_black:#454747;
}
.wf-sawarabigothic { font-family: "Sawarabi Gothic"; }
#counter,
input,
button,
a{
font-family: "Sawarabi Gothic";
}
#counter{
font-size:120%;
width:100%;
color:var(--base_black);
max-width:750px;
}
#counter p{
display:flex;
}
#counter p > *{
margin-right:0.2em;
margin-left:0.2em;
}
#counter input.checklabelipt{
display:none;
}
#counter input.checklabelipt + .checklabel{
font-size:75%;
line-height:1.5em;
background:var(--primary_blue_lite);
border-radius:1em;
padding:5px;
}
#counter input.checklabelipt:checked + .checklabel{
background:var(--primary_blue);
color:#fff;
}
#counter input{
border:none;
border-bottom:var(--primary_pink) solid 2px;
font-size:75%;
}
#counter input.w-6em{
width:6.5em;
}
#counter input.w-10em{
width:10.5em;
}
#counter button{
border:none;
background:var(--primary_blue);
color:#fff;
border-radius:0.25em;
}
#counter p button{
line-height:1em;
padding:10px;
}
#counter .addline{
background:var(--primary_pink);
font-size:110%;
padding:0 20px;
}
#counter > p,
#counter .addline{
display:block;
margin-right:auto;
margin-left:auto;
}
p.counter_num{
min-width:4em;
text-align:right;
}
.vallabel{
font-size:75%;
color:var(--primary_blue)
}
var counterCntl = function($scope){
$scope.total = 0;
$scope.counter_show = true;
$scope.subt_show = true;
$scope.parcnt_show = false;
$scope.counters = [
{'name':'','count':0, 'tanka':0, 'subtotal':0, parcent:0},
{'name':'','count':0, 'tanka':0, 'subtotal':0, parcent:0},
];
$scope.countup = function(e){
console.log(this);
e.counter.count++;
$scope.total++;
$scope.inputTanka(e);
$scope.parcent();
}
$scope.inputTanka = function(e){
//単価に対する計算
e.counter.subtotal = e.counter.count * e.counter.tanka;
}
$scope.parcent = function(){
//全ての行の割合を計算する
for(var k = 0; k < $scope.counters.length; k++){
var c = $scope.counters[k]['count'];
$scope.counters[k]['parcent'] = Math.round((c / $scope.total) * 10000) / 100;
}
}
$scope.addCounter = function(){
$scope.counters.push({'name':'', 'count':0, 'tanka':0, 'subtotal':0, 'parcent':0});
}
}
External CSS
This Pen doesn't use any external CSS resources.