Angularjs ng-repeat filter counting variables?

Question

I'm creating a tree view of the amount of forms employees either haven't filled out, have started or completed. There can be multiple nested levels.

For a simple example the rows are:

Year 2014: missing:3, started=7, completed=7

John Doe: missing=2, started=3, completed=5

Phil Smith: missing=1, started=4, completed=2

What if I filter on employee? Then I want the missing, started and completed count to change for the year row. How do I have those variables be dynamically calculated with an ng-repeat?

Answer 1

You would want to calculate the subtotals in the controller. Your problem is that you want the subtotals to update according to the filters that are applied on view. You can achieve this by injecting $filter into your controller.

Have a look at the plunk here: http://plnkr.co/edit/JwUOzm5u3G7379I1W6hk?p=preview

I created a filter in an input box. Try changing the text, the subtotals update accordingly. In this case I use the 'filter' filter both in the view as well as the controller so that the view and the subtotal update simultaneously.

Code below:

<!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 filter counting variables?

Question

1 answers

solution1
1 ACCPTED 2014-11-11 06:33:14

Angularjs ng-repeat filter counting variables?

Question

1 answers

solution1 1 ACCPTED 2014-11-11 06:33:14

solution1
1 ACCPTED 2014-11-11 06:33:14