演示

Question

我正在尝试根据每个部门的总和而不重复（此部分有效），并根据所选日期显示所有结果。

我想通过md-datepicker选择日期，然后只显示日期=选择日期的总任务时间。

有HTML部分：

<body ng-app="ngrepeatSelect">
    <div ng-controller="ExampleController">
        <form name="myForm">
            <md-datepicker ng-model="myDate" md-placeholder="Enter date" ng-change="sum(myDate)"></md-datepicker>
            {{myDate}}
            <tt>model = {{data.model}}</tt>
            <br/>
            <hr/>
        </form>
        <md-table-container>
            <table md-table>
                <thead md-head>
                    <tr md-row>
                        <th md-column>Dept</th>
                        <th md-column>Total time</th>
                        <th md-column></th>
                    </tr>
                </thead>
                <tbody md-body>
                    <tr ng-if="!data.model" md-row md-select="test" md-on-select="" md-auto-select ng-repeat="test in tests">
                        <td md-cell>{{ test.dept }}</td>
                        <td md-cell>{{ test.total }}</td>
                        <td md-cell></td>
                    </tr>

                    <tr ng-if="data.model" md-row md-select="test" md-on-select="" md-auto-select ng-repeat="(key,val) in data.model">
                        <td md-cell>{{ key }}</td>
                        <td md-cell>{{ val }}</td>
                        <td md-cell></td>
                    </tr>
                </tbody>
            </table>
        </md-table-container>
    </div>
</body>

和JS

angular.module('ngrepeatSelect', ['ngMaterial'])
    .controller('ExampleController', function($scope, $filter) {
        $scope.myDate = '';

        $scope.$watch('myDate', function(newVal, oldVal) {
            if (!newVal) {
                return false;
            }
            var date = $filter('date')(new Date(newVal), "yyyy-MM-dd");
        });

        var data = [{
            id: "1",
            user: "John Doe",
            dept: "test",
            date: "2017-03-02",
            task_time: "83"
        }, {
            id: "2",
            user: "Mark Doe",
            dept: "test",
            date: "2017-02-02",
            task_time: "41"
        }, {
            id: "3",
            user: "Zac Doe",
            dept: "other",
            date: "2017-02-04",
            task_time: "12"
        }, {
            id: "4",
            user: "Zac Doe",
            dept: "test",
            date: "2017-03-02",
            task_time: "41"
        }, {
            id: "5",
            user: "Zac Doe",
            dept: "test",
            date: "2017-03-02",
            task_time: "41"
        },{
            id: "6",
            user: "Zac Doe",
            dept: "test2",
            date: "2017-03-02",
            task_time: "41"
        },{
            id: "7",
            user: "John Doe",
            dept: "test",
            date: "2017-01-02",
            task_time: "41"
        },{
            id: "8",
            user: "Zac Doe",
            dept: "test",
            date: "2017-01-01",
            task_time: "41"
        },{
            id: "9",
            user: "John Doe",
            dept: "tests",
            date: "2017-02-12",
            task_time: "41"
        }, {
            id: "10",
            user: "Zac Doe",
            dept: "test2",
            date: "2017-02-13",
            task_time: "53"
        }];

        var totalPerDept = [];

        angular.forEach(data, function(item) {
            var index = findWithAttr(totalPerDept, 'dept', item.dept);

            if (index < 0) {
                totalPerDept.push({
                    dept: item.dept,
                    total: parseFloat(item.task_time)
                });
            } else {
                totalPerDept[index].total += parseFloat(item.task_time);
            }
        });
        $scope.tests = totalPerDept;

        function findWithAttr(array, attr, value) {
            for (var i = 0; i < array.length; i += 1) {
                if (array[i][attr] === value) {
                    return i;
                }
            }
            return -1;
        }


        $scope.sum = function(date) {
            let model = data.filter(function(item) {
                return (item.date == TheSameDate(item))
            });

            let tests = {};
            model.forEach(function(item) {
                if (!tests.hasOwnProperty(item.dept)) {
                    tests[item.dept] = 0;
                }

                tests[item.dept] += parseFloat(item.task_time);

            });

            $scope.data.model = tests;
        }

        function TheSameDate(item){
            if($scope.myDate){
            let myDate = new Date($scope.myDate);
            let itemDate = new Date(item.date);

            if(myDate.getFullYear() != itemDate.getFullYear() || myDate.getMonth() != itemDate.getMonth()){
                return false;
            }
          }

          return true
        }


        $scope.data = {
                current: null,
            model: null,
            availableOptions: [{
                    id: '1',
                    name: 'John Doe'
                },
                {
                    id: '2',
                    name: 'Mark Doe'
                },
                {
                    id: '3',
                    name: 'Zac Doe'
                }
            ]
        };


    });

我已创建jsFiddle以显示我要做的事情。

Answer 1

我重构了您的代码并改变了比较日期的方式。

我已在下面的代码段中使用来检查过滤器本身中两个日期的相等性

let model = data.filter(function(item) {
    let iDate = new Date(item.date);
    return (
        iDate.getFullYear() === sDate.getFullYear() &&
        iDate.getMonth() === sDate.getMonth() &&
        iDate.getDate() === sDate.getDate()
    );
});

演示

fiddle

根据日期显示所有总金额

1 个答案:

演示