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

AngularJS filter doesn't work with my data: associative array

本文关键字:关联 数组 数据 我的 过滤器 不适用 适用于 AngularJS      更新时间:2023-09-26

我仍然是 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"
                }
            ]
        ]
    };

在您的指令模板中,删除单词"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>'