Grouped ListLayout - how? #35

JimSEOW · 2015-05-31T10:57:57Z

http://try.buildwinjs.com/#listview:grouped

var myData = new WinJS.Binding.List([
        { title: "Banana Blast", ...

]};

var grouped = myData.createGrouped(function (item) {
    return item.title.toUpperCase().charAt(0);
}, function (item) {
    return {
        title: item.title.toUpperCase().charAt(0)
    };
}, function (left, right) {
    return left.charCodeAt(0) - right.charCodeAt(0);
});

How to implement that in angularjs e.g.

$scope.items = [
 { title: "Banana Blast", ...

];

$scope.grouped  =

JimSEOW · 2015-05-31T11:44:31Z

I would like to know if it is possible and in the case how we can use listview:grouped ( http://try.buildwinjs.com/#listview:grouped ) with angular-winjs. Thanks.

TheWrathOfConst · 2015-06-19T20:24:02Z

Yep, it's possible to use grouped ListViews. You need to have an Binding.List set up on your scope that supports grouping. Here's an example:

<!DOCTYPE html>
<html ng-app="sample" ng-controller="sampleController">
<head>
    <title>Example of Grouped ListView</title>
    <link rel="stylesheet" type="text/css" href="Microsoft.WinJS.4.0\css\ui-dark.css" />
    <script type="text/javascript" src="Microsoft.WinJS.4.0\js\base.js"></script>
    <script type="text/javascript" src="Microsoft.WinJS.4.0\js\ui.js"></script>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="angular-winjs.js"></script>
    <script>
        angular.module('sample', ['winjs']).controller("sampleController", function ($scope) {
            $scope.dataSource = new WinJS.Binding.List([1, 2, 3, 4, 5]).createGrouped(function groupingFunction(item) {
                if (item < 3) {
                    return "0";
                }
                return "1";
            }, function groupData(item) {
                if (item < 3) {
                    return {title: "Group 0"};
                }
                return { title: "Group 1" };
            });
        });
    </script>
</head>

<body>
    <win-list-view item-data-source="dataSource" group-data-source="dataSource.groups">
        <win-item-template>
            Item {{item.data}}
        </win-item-template>
        <win-group-header-template>
            {{item.data.title}}
        </win-group-header-template>
    </win-list-view>
</body>

</html>

TheWrathOfConst added the question label Jun 1, 2015

mikewjackson added .kind: question and removed question labels Jun 11, 2015

mikewjackson added this to the 1506 milestone Jun 11, 2015

mikewjackson assigned TheWrathOfConst Jun 11, 2015

jdalton closed this as completed Jul 7, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Grouped ListLayout - how? #35

Grouped ListLayout - how? #35

JimSEOW commented May 31, 2015

JimSEOW commented May 31, 2015

TheWrathOfConst commented Jun 19, 2015

Grouped ListLayout - how? #35

Grouped ListLayout - how? #35

Comments

JimSEOW commented May 31, 2015

JimSEOW commented May 31, 2015

TheWrathOfConst commented Jun 19, 2015