AngularJS过滤器不适用于我的数据：关联数组

Question

我仍然是AngularJS的新手，但我想在我的数据上添加一个过滤器，但我无法弄清楚如何让它工作。 我的数据是一个关联数组，当我添加一个普通数组进行测试时，它都可以工作。

我在html中调用我的指令：

<dispatch data='listToDispatch' search="searchDispatch"></dispatch>

我的指示：

define(['dashboard/module', 'lodash'], function (module) {

'use strict';

return module.registerDirective('dispatch', function () {
    return {
        controller: 'DashboardCtrl',
        restrict: 'E',
        scope: {
            data: '=',
            search: '='
        },
        template: '<div class="padding-dispatch" ng-repeat="(name,user) in data | filter:search">' +
                        '<strong>{{name}}</strong>' +
                        '{{search}}' +
                        '<div class="dispatch-charts" chartjsdoughnut="user[0]"></div>' +
                        '<div class="dispatch-charts" chartjsdoughnut="user[1]"></div>' +
                        '<div class="dispatch-charts" chartjsdoughnut="user[2]"></div>' +
                        '<div class="dispatch-charts" chartjsdoughnut="user[3]"></div>' +
                        '<hr />' +
                    '</div>'
    }
});

我的数据传递给指令：

$scope.dataPersons =
    {
        "Sidney":
        [

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 36,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 40,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is unique"
                },
               {
                   value: 30,
                   color: "#7eb3cf",
                   highlight: "#1675a9",
                   label: "is unique"
               }
            ],

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
               {
                   value: 30,
                   color: "#7eb3cf",
                   highlight: "#1675a9",
                   label: "is used"
               }
            ],

            [
               {
                   value: 70,
                   color: "#1675a9",
                   highlight: "#1675a9",
                   label: "is in use"
               },
               {
                   value: 30,
                   color: "#7eb3cf",
                   highlight: "#1675a9",
                   label: "is used"
               }
            ]
        ],
        "Cedric":
        [

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 76,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
               {
                   value: 30,
                   color: "#7eb3cf",
                   highlight: "#1675a9",
                   label: "is used"
               }
            ],

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
               {
                   value: 30,
                   color: "#7eb3cf",
                   highlight: "#1675a9",
                   label: "is used"
               }
            ],

            [
               {
                   value: 70,
                   color: "#1675a9",
                   highlight: "#1675a9",
                   label: "is in use"
               },
               {
                   value: 30,
                   color: "#7eb3cf",
                   highlight: "#1675a9",
                   label: "is used"
               }
            ]
        ]
    };
    $scope.dataVehicles =
    {
        "Xavier":
        [

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 36,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 40,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is unique"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is unique"
                }
            ],

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ]
        ],
        "Tarek":
        [

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 76,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ]
        ]
    };

Answer 1

在您的指令模板中，删除单词“filter”和后面的“：”。模板应如下所示：

 template: '<div class="padding-dispatch" ng-repeat="(name,user) in data | search">' +
                    '<strong>{{name}}</strong>' +
                    '{{search}}' +
                    '<div class="dispatch-charts" chartjsdoughnut="user[0]"></div>' +
                    '<div class="dispatch-charts" chartjsdoughnut="user[1]"></div>' +
                    '<div class="dispatch-charts" chartjsdoughnut="user[2]"></div>' +
                    '<div class="dispatch-charts" chartjsdoughnut="user[3]"></div>' +
                    '<hr />' +
                '</div>'