JSFiddle - React, Tailwind, and code Playground

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>

JavaScript

"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;
    }
});