通过 angular 构建字母头像网格

Question

我通过 ng-repeat 创建了一个简单的字母头像网格，但效果不佳。如果我使用搜索过滤器，它只会刷新名称。图标未按名称刷新。

主要html.

    <md-grid-tile ng-cloak ng-repeat="user in vm.users | filter: vm.searchText track by $index">
        <user-card name="{{user.name}}"></user-card>
    </md-grid-tile>

用户卡指令：

        .directive("userCard", function () {
        return {
            restrict: "E",
            template:
            "<md-card>" +
                "<md-card-title layout=\"column\" layout-align=\"center center\">"+
                    "<md-card-title-media layout=\"column\" layout-align=\"center center\">"+
                            "<md-button class=\"md-fab\" ng-style=\"{'background-color': color }\""+
                                "<span class=\"letter\">{{name[0]}}</span>"+
                            "</md-button>"+
                            "{{color}}"+
                        "<span>{{name}}</span>"+
                    "</md-card-title-media>"+
                "</md-card-title>"+
            "</md-card>",
            scope: {
                name: "@"
            },
           controller: function ($scope) {
                var alphabetColors = ["#5A8770", "#B2B7BB", "#6FA9AB", "#F5AF29", "#0088B9", "#F18636",
                    "#D93A37", "#A6B12E", "#5C9BBC", "#F5888D", "#9A89B5", "#407887", "#9A89B5",
                    "#5A8770", "#D33F33", "#A2B01F", "#F0B126", "#0087BF", "#F18636", "#0087BF",
                    "#B2B7BB", "#72ACAE", "#9C8AB4", "#5A8770", "#EEB424", "#407887"];
                var colorIndex = Math.floor(($scope.name.charCodeAt(0) - 65) % alphabetColors.length);
                $scope.color = alphabetColors[colorIndex];
            }
        }
    });

Plunker

我发现问题是我使用

track by $index

它只是刷新 DOM 对象的 user.name 部分而不是全部，这就是为什么搜索后颜色不会被用户更改的原因。如果我删除 "track by $index" 效果很好，但是当页面上的化身过多（超过一千）时它会出现性能问题。 所以问题是：在前端做这个是更好的方法吗？

所有的分页、搜索、排序都在前端完成。

Answer 1

您可以将 obj 传递给 'user-card' 指令并将颜色代码保存到控制器中的该对象。

更新的插件：

https://plnkr.co/edit/frLiLfMU7r0P4VCcfGC6

<md-grid-tile ng-cloak ng-repeat="user in vm.users | filter: vm.searchText track by $index">
   <user-card obj="user"></user-card>
</md-grid-tile>

控制器：

controller: function($scope) {
    var alphabetColors = ["#5A8770", "#B2B7BB", "#6FA9AB", "#F5AF29", "#0088B9", "#F18636",
              "#D93A37", "#A6B12E", "#5C9BBC", "#F5888D", "#9A89B5", "#407887", "#9A89B5",
              "#5A8770", "#D33F33", "#A2B01F", "#F0B126", "#0087BF", "#F18636", "#0087BF",
              "#B2B7BB", "#72ACAE", "#9C8AB4", "#5A8770", "#EEB424", "#407887"
            ];


    var colorIndex = Math.floor(($scope.obj.name.charCodeAt(0) - 65) % alphabetColors.length);
    $scope.obj.color = alphabetColors[colorIndex];
}

通过 angular 构建字母头像网格

Build letter avatar grid by angular

javascript

angularjs

angular-material