如何将单一品牌的所有产品组合在一起——angular JS

How to group all product of single brand together - angular JS

本文关键字：在一起 组合 angular JS 有产品 单一 品牌      更新时间：2023-09-26

请看这个JS小提琴链接。

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

这是group by

的逻辑
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;
};

我想把所有的产品归在一起。

我需要做哪些更改?

我是这么想的。不使用任何自定义过滤器

我只是使用这个ng-repeat语法:

ng-repeat="(key,item) in MyList  | orderBy:orderKey"

由于它，我可以得到键值与前一个对象的值进行比较。

这是我的ng-show属性。可以通过在其他地方(如控制器中)对列表进行排序来改进

<h2 ng-show="(MyList | orderBy:orderKey)[key-1][orderKey] !== (MyList  | orderBy:orderKey)[key][orderKey]"

多亏了这个，你可以用你的任何属性名填充你的var "orderKey"，这将工作。

查看它在这个JSFiddle中的工作

希望有帮助。

编辑:

我认为使用一个临时列表来管理视觉顺序会更简洁一些(参见这个JSFiddle):

JS:

$scope.orderList = function(){
       $scope.orderedList = $filter('orderBy')($scope.MyList,$scope.orderKey);
}
HTML:

ng-change="orderList()"触发列表排序

清洁器ng-repeat/ng-show

    <div ng-repeat="(key,item) in orderedList">
        <h2 ng-show="orderedList[key-1][orderKey] !== orderedList[key][orderKey]">{{item[orderKey]}} </h2>
        <ul>
            <li>{{item.ProductName}}</li>
        </ul>
    </div>

看看这个:http://jsfiddle.net/4Dpzj/176/

<div ng-repeat="item in MyList  | orderBy:['SubCategoryName','BrandName'] | groupBy:['SubCategoryName']" >
    <h2 ng-show="item.group_by_CHANGED">{{item.SubCategoryName}} </h2>
    <ul>
        <li>{{item.ProductName}} --- {{item.BrandName}}</li>
    </ul>
</div>
相关文章：