Question

我有一个显示功能列表子类别的指令。

问题是，显示所有项目，我用于ng-repeat的过滤器的关注度。我使用过滤器仅显示具有特定category_uid的项目，并且我还使用limitTo。

app.directive('featureCategory', function() {
    return {
        restrict: 'A',
        transclude: true,
        link: function($scope) {
            $scope.featureCountBuffer = $scope.featureCount;
            $scope.listLength = Object.keys($scope.featureList).length;
        },
        scope: {
            featureList: '=',
            featureCount: '@',
            categoryId: '@'
        },
        template:
            '<li>featureCountBuffer : {{featureCountBuffer}} / listLength {{listLength}} / categoryId {{categoryId}}</li>' +
            '<check-item ng-repeat="feature in featureList | filter:{category_uid:categoryId} | limitTo: featureCountBuffer" feature="feature"></check-item>'
    }
});

这显示以上40个项目，它以li元素开头，显示featureCountBuffer为5，而category_uid为1，仅适用于8个项目。

有人在这看到我的错误吗？

featureList看起来像这样：

{
  "1": {
    "uid": "1",
    "title": "foo",
    "category_uid": "1",
    "checked": false
  },
  "2": {
    "uid": "2",
    "title": "bar",
    "category_uid": "1",
    "checked": false
  },
  "3": {
    "uid": "3",
    "title": "foobar",
    "category_uid": "2",
    "checked": false
  },
  "4": {
    "uid": "4",
    "title": "barfoo",
    "category_uid": "2",
    "checked": false
  },
  "5": {
    "uid": "5",
    "title": "barbar",
    "category_uid": "3",
    "checked": false
  }
  ...
}

Answer 1

我找到了问题。

Angulars ng-repeat适用于objects of objects但过滤器不适用。您可以编写自己的过滤器来修复此问题，也可以只使用对象数组。

我使用lodash's _.toArray转换我的。我的变化：

[..]
link: function($scope) {
  [..]
  $scope.featureList = _.toArray($scope.featureList);
},
[..]

您可以更详细地阅读in this article。

Answer 2

感谢您发布此内容！我找到了使用$index属性的替代解决方案：

 <ul>                                          
   <li ng-repeat="(id, value) in test" ng-if="$index < 3" >              
   {{ $index }} {{ id }} {{ value }}        
   </li>                                       
 </ul>

ng-repeat对给定的limitTo或过滤器没有反应

2 个答案: