Question

我正在创建一个树形视图，显示员工未填写，已启动或已完成的表单数量。可以有多个嵌套级别。

对于一个简单的例子，行是：

2014年：失踪：3，开始= 7，完成= 7

John Doe：缺少= 2，开始= 3，完成= 5

Phil Smith：缺少= 1，开始= 4，完成= 2

如果我过滤员工怎么办？然后我希望缺少，开始和完成的计数更改为年份行。如何使用ng-repeat动态计算这些变量？

Answer 1

您可能想要计算控制器中的小计。您的问题是您希望小计根据视图上应用的过滤器进行更新。您可以通过在控制器中注入$ filter来实现此目的。

在这里查看插件：http://plnkr.co/edit/JwUOzm5u3G7379I1W6hk?p=preview

我在输入框中创建了一个过滤器。尝试更改文本，相应地更新小计。在这种情况下，我在视图和控制器中都使用“过滤器”过滤器，以便同时更新视图和小计。

以下代码：

<!DOCTYPE html>
<html>
 <head>
    <script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />

    <script src="script.js"></script>
  </head>

  <body ng-app="app">


    <div ng-controller="mainCtrl as main">
      <input type="text" ng-model="main.empName" placeholder="name filter">
      <div ng-repeat="year in main.data">
      {{year.yearNum}}:{{main.calculateTotal(year.yearNum)}}
        <div ng-repeat="employee in year.employees|filter:main.empName">
          {{employee.name}} : {{employee.cost}}
        </div>
      </div>
    </div>



    <script>
    angular.module('app',[])
      .controller('mainCtrl',function($filter){
      var main=this;

      main.calculateTotal=function(yearNum){
        var data=main.data;
        var total=0;
        for(var i=0;i<data.length;i++){
          if(data[i].yearNum==yearNum)
          {
            var employees=$filter('filter')( main.data[i].employees, main.empName );
            for(var j=0;j<employees.length;j++){
              total+=employees[j].cost; 
            }
          }
        }
        return total;
      }


      main.data=[
        {
          yearNum:2012,
          employees:[
          {
            name:"jane",
            cost:200
          },
          {
            name:"jow",
            cost:400
          }
          ]
        },
        {
          yearNum:2013,
          employees:[
          {
            name:"jane",
            cost:250
          },
          {
            name:"jow",
            cost:450
          }
          ]
        }

        ];
    });
  </script>
  </body>

</html>

Angularjs ng-repeat过滤计数变量？

1 个答案: