Question

我有两个服务，位置和类别。
每个位置都可以连接到一个或多个位置。位置类别存储为类别ID的数组，例如：

Locations: [{id: 1,
  name: "NJ",
  locations: [0, 2, 3]
},{
  id: 2,
  name: "NY",
  location: [0, 2]
}]

Categories: [{
  id: 0,
  name: "Cities"
}, {
  id: 2,
  name: "Canyons"
}, {
  id: 3,
  name: "Work"
}]

现在，我希望在我的模板中用逗号来枚举每个位置的类别，例如：新泽西州类别：城市，峡谷，工作纽约类别：城市，工作。

我的代码将两个服务（位置和类别）注入控制器，每个服务都有＆＃34; getAll（）＆＃34;返回所有对象的数组的函数..

这样做的正确方法是什么？也许我可以把它放在指令上？

谢谢：）

Answer 1

这样做的正确方法是什么？

您可以使用ngRepeat指令+自定义过滤器。

<span ng-repeat="city in cities">{{ categories | CategoriesInCity:city }}</span>

过滤：

myApp.filter('CategoriesInCity', function(){
    return function(categories , city){
       // build categoriesStringFound   
       return city+'categories'+categoriesStringFound;
    }
})

Answer 2

这个怎么样？这是一个简单的实现（所有在一个HTML中，因为我不知道你的应用程序组件是什么样的）使用指令。它确实有效，但是它确实有改进的余地..但它应该足以让它得到改善。

请注意，您提到的服务未实现，我只是在控制器上公开数据并将其传递给指令。您可以对服务中的数据执行相同操作，也可以在指令中注入服务：

<html>
    <head>
        <script type="text/javascript" src="http://code.angularjs.org/1.4.6/angular.js"></script>
        <script type="text/javascript">
            var geoApp = angular.module("geography", []);

            geoApp.controller("geographyController", function () {
                this.locations = [
                    {
                        id: 1,
                        name: "NJ",
                        categories: [0, 2, 3]
                    }, {
                        id: 2,
                        name: "NY",
                        categories: [0, 2]
                    }
                ];

                this.categories =
                    [
                        {
                            id: 0,
                            name: "Cities"
                        }, {
                            id: 2,
                            name: "Canyons"
                        }, {
                            id: 3,
                            name: "Work"
                        }
                    ];
            });

            geoApp.directive("categoriesFor", function () {

                var link = function (scope) {

                    var getCategoryName = function (id) {
                        for (var i = 0; i < scope.categories.length; i++) {
                            var category = scope.categories[i];
                            if (category.id === id) {
                                return category.name;
                            }
                        }

                        return "not available (" + id + ")";
                    };

                    scope.getCategoriesForLocation = function () {
                        var availableCategories = [];
                        angular.forEach(scope.location.categories, function (categoryId) {
                            availableCategories.push(getCategoryName(categoryId));
                        });

                        return availableCategories.join(scope.splitChar);
                    }

                };

                return {
                    restrict: "A",
                    scope: {
                        location: "=categoriesFor",
                        categories: "=",
                        splitChar: "="
                    },
                    template: "{{location.name}} categories: {{getCategoriesForLocation()}}",
                    link: link
                };
            });
        </script>
    </head>

    <body data-ng-app="geography" data-ng-controller="geographyController as geo">
        <ul>
            <li data-ng-repeat="location in geo.locations">
                <span data-categories-for="location"
                      data-categories="geo.categories"
                      data-split-char="', '"></span>
            </li>
        </ul>
    </body>

</html>

一个改进可能是改变你的数据结构，即创建密钥为id的对象（而不是数组）。这样可以更容易地访问它们。

而且，与Angular一样，有几种不同的方法。它总是取决于你的需求（即重新使用等）。

Answer 3

我认为最简单的方法是使用要显示的字符串构建第三个数组，然后使用ng-repeat在页面上显示它们。

所以在你的控制器中，你会有类似的东西（注意地图和过滤器功能只适用于现代浏览器）：

var locs = Locations.getAll()
var cats = Categories.getAll()

$scope.display = locs.map(function(loc) {
  return loc.name + ' categories: ' + loc.locations.map(function(id) { 
    return cats.filter(function(cat) {
      return id === cat.id;
    })[0].name;
  });
});

在你的页面上，你有：

<ul>
  <li ng-repeat="line in display">{{line}}</li>
</ul>

Angularjs - 枚举模板

3 个答案: