AngularJS集团通过指令没有外部依赖 [英] AngularJS Group By Directive without External Dependencies

问题描述

我新的角度，想学会处理问题的最好办法。我的目标是有一个可重复使用的手段头创建组。我创建了有效的解决方案，但我认为这应该是一个指令，而不是我的控制器内的范围的功能，但我不知道如何做到这一点，或者如果一个指令是连正确的方式去。任何投入将大大AP preciated。

I'm new to Angular and would like to learn the best way to handle a problem. My goal is to have a reusable means to create group by headers. I created a solution which works, but I think this should be a directive instead of a scope function within my controller, but I'm not sure how to accomplish this, or if a directive is even the right way to go. Any inputs would be greatly appreciated.

请参阅我目前的做法工作的jsfiddle

See my current approach working on jsFiddle

在HTML它采用NG-重复，我打电话给我的NG-显示newGrouping（）函数的简单列表。功能的引用传递到完整列表，我通过要分组的字段，和当前索引

In the HTML it's a simple list using ng-repeat where I call my newGrouping() function on ng-show. The function passes a reference to the full list, the field I want to group by, and the current index.

<div ng-app>
<div ng-controller='TestGroupingCtlr'>
    <div ng-repeat='item in MyList'>
        <div ng-show="newGrouping($parent.MyList, 'GroupByFieldName', $index);">
            <h2>{{item.GroupByFieldName}}</h2>
        </div>
        {{item.whatever}}
    </div>
</div>
</div>

在我的控制器我有我的newGrouping（）函数，它只是将当前的previous，除了在第一个项目，这取决于比赛返回true或false。

In my controller I have my newGrouping() function which simply compares the current to the previous, except on the first item, and returns true or false depending upon a match.

function TestGroupingCtlr($scope) {

  $scope.MyList = [
    {GroupByFieldName:'Group 1', whatever:'abc'},
    {GroupByFieldName:'Group 1', whatever:'def'},
    {GroupByFieldName:'Group 2', whatever:'ghi'},
    {GroupByFieldName:'Group 2', whatever:'jkl'},
    {GroupByFieldName:'Group 2', whatever:'mno'}
  ];

  $scope.newGrouping = function(group_list, group_by, index) {
  if (index > 0) {
    prev = index - 1;
    if (group_list[prev][group_by] !== group_list[index][group_by]) {
      return true;
    } else {
      return false;
    }
  } else {
    return true;
  }
  };
}

输出将这个样子。

The output will look like this.

第1组

• ABC


• DEF

第2组

• GHI


• JKL


• MNO

这感觉就像应该有一个更好的办法。我想这是一个共同的效用函数，我可以重复使用。如果这是一个指令？有没有引用列表中的比我传递的完整列表和当前指数的方法previous项目更好的办法？我将如何接近一个指令来呢？

It feels like there should be a better way. I want this to be a common utility function that I can reuse. Should this be a directive? Is there a better way to reference the previous item in the list than my method of passing the full list and the current index? How would I approach a directive for this?

任何意见大大AP preciated。

Any advice is greatly appreciated.

更新：寻找不需要外部依赖一个答案。
有使用下划线/ lodash或角滤波模块很好的解决方案。

UPDATE: Looking for an answer that does not require external dependencies. There are good solutions using underscore/lodash or the angular-filter module.

达里尔

推荐答案

这是欧阳的解决方案上面，允许多个小组通过参数的修改。此外，它利用了$解析，以允许参数使用嵌套属性组。

This is a modification of Darryl's solution above, that allows multiple group by parameters. In addition it makes use of $parse to allow the use of nested properties as group by parameters.

使用多个嵌套的参数示例

http://jsfiddle.net/4Dpzj/6/

HTML

<h1>Multiple Grouping Parameters</h1>
<div ng-repeat="item in MyList  | orderBy:'groupfield' | groupBy:['groupfield', 'deep.category']">
    <h2 ng-show="item.group_by_CHANGED">{{item.groupfield}} {{item.deep.category}}</h2>
     <ul>
        <li>{{item.whatever}}</li>
     </ul>
</div>  

过滤器（JavaScript）的

Filter (Javascript)

app.filter('groupBy', ['$parse', function ($parse) {
    return function (list, group_by) {

        var filtered = [];
        var prev_item = null;
        var group_changed = false;
        // this is a new field which is added to each item where we append "_CHANGED"
        // to indicate a field change in the list
        //was var new_field = group_by + '_CHANGED'; - JB 12/17/2013
        var new_field = 'group_by_CHANGED';

        // loop through each item in the list
        angular.forEach(list, function (item) {

            group_changed = false;

            // if not the first item
            if (prev_item !== null) {

                // check if any of the group by field changed

                //force group_by into Array
                group_by = angular.isArray(group_by) ? group_by : [group_by];

                //check each group by parameter
                for (var i = 0, len = group_by.length; i < len; i++) {
                    if ($parse(group_by[i])(prev_item) !== $parse(group_by[i])(item)) {
                        group_changed = true;
                    }
                }


            }// otherwise we have the first item in the list which is new
            else {
                group_changed = true;
            }

            // if the group changed, then add a new field to the item
            // to indicate this
            if (group_changed) {
                item[new_field] = true;
            } else {
                item[new_field] = false;
            }

            filtered.push(item);
            prev_item = item;

        });

        return filtered;
    };
}]);

这篇关于AngularJS集团通过指令没有外部依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！