ng-repeatで表とか作る時、カスタムフィルタとかでフィルタリングした後の合計値とかを使いたい。
まあ、そんなに難しくなくて、
<tr ng-repeat="item in filteredItems=(main.items | filter:q)">
っていうのかキモかな。
index.html
<div ng-app="myApp">
<div ng-controller="MainCtrl as main">
<input ng-model="q"/>
<table>
<body>
<tr ng-repeat="item in filteredItems=(main.items | filter:q)">
<td>{{item.text}}</td>
<td>{{item.amount}}</td>
</tr>
<tr>
<td>sum</td>
<td>{{filteredItems|sumFilter}}</td>
</tr>
</body>
</table>
</div>
</div>
"use strict";
angular.module("myApp", []);
//値を発生させる
angular.module("myApp").controller("MainCtrl", function(){
this.items = [];
for(var i = 0; i < 10; i++){
this.items[i] = {
text: "item" + i,
amount: Math.round(1000 * Math.random())
}
}
});
//合計値計算フィルタ
angular.module("myApp").filter("sumFilter", function(){
return function(input){
var sum = 0;
input.forEach(function(i){
if(i.amount){
sum = sum + i.amount;
}
});
return sum;
}
});
https://jsfiddle.net/wk3wjkjx/2/
こんな感じ。
業務用アプリとかでこういうことしている人はすでにいるでしょうかね。
もっといいやり方あったら教えて。
as
ng-repeatでasの記法を使うことができる。ということを@Quramyさんからコメントいただきました。
1.3.xから使えるのかなhttps://docs.angularjs.org/api/ng/directive/ngRepeat
https://jsfiddle.net/wk3wjkjx/3/
書き直して見ました。
こっちの方が見やすいですね。
