angularjs – 如何使用现有过滤器计算ng-repeat中的行总和

发布时间：2020-12-17 17:04:11 所属栏目：安全来源：网络整理

导读：我有这样的简单过滤器： div id="dataFilter" input type="search" ng-model="dataFilter" placeholder="Фильтр..."/ /div 并重复： tr class="row" ng-repeat="obj in allObjects | filter: dataFilter | orderBy:orderProperty:orderReverse" td {{o

我有这样的简单过滤器：

<div id="dataFilter">
     <input type="search" ng-model="dataFilter" placeholder="Фильтр..."/>
 </div>

并重复：

<tr class="row"
    ng-repeat="obj in allObjects
    | filter: dataFilter
    | orderBy:orderProperty:orderReverse" >
    <td>
        {{obj.value}}
    </td>
</tr>

如何使用alredy filtred对象进行一些计算？
我的意思是……我需要用obj.Value做一些东西,但仅限于滤光对象.

解决方法

如果保存对已过滤列表的引用,则可以使用它来计算总和：

视图：

<p ng-repeat="city in (filteredList = (cities | filter: dataFilter))"></p>

<p>Total population: {{calculateTotal(filteredList)}}</p>

控制器：

$scope.calculateTotal = function(cities){
   // calculate total
}

angular.module('MyModule',[])

.controller('MyController',function($scope) {

  $scope.cities = [
    { id: 1,name: 'Moscow',population: 11.84},{ id: 2,name: 'St Petersburg',population: 5.03},{ id: 3,name: 'Novosibirsk',population: 1.52},{ id: 4,name: 'Jekateriburg',population: 1.4},{ id: 5,name: 'Novogorod',population: 1.26}
  ];

  $scope.calculateTotal = function(cities){
    return cities.reduce( function(totalPopulation,city){
      return totalPopulation + city.population
    },0);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='MyModule' ng-controller='MyController'>
  
  <input type="search" ng-model="dataFilter"/>

  <p ng-repeat="city in (filteredList = (cities | filter: dataFilter))">{{city.name}},population: {{city.population}}</p>

  <p>Total poulation: {{calculateTotal(filteredList)}}</p>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!