rjhdby
rjhdby

Reputation: 1387

AngularJS, mdList, ng-repeat and generators

Generator:

$scope.inside = [...];

var generator        = function*() {
    var l = Math.ceil($scope.inside.length / 3);
    for (var i = 0; i < 3; i++) {
        yield $scope.inside.slice(l * i, l * (i + 1));
    }
};
$scope.insideDivided = generator();

Template:

<md-list flex ng-repeat="column in [1,2,3]">
    <md-list-item ng-click="log(button.url)" ng-repeat="button in insideDivided.next().value">
        {{log(button)}}
        {{button.title}}
    </md-list-item>
</md-list>

Instruction {{log(button)}} write correct items to console

Object {title: "someTitle1", url: "/inside/fake.html", $$hashKey: "object:13"} root.js:100 
Object {title: "someTitle2", url: "/inside/fake.html", $$hashKey: "object:14"} root.js:100 
Object {title: "someTitle3", url: "/inside/fake.html", $$hashKey: "object:15"}
....

But only creating empty <md-list>

    <!-- ngRepeat: column in [1,2,3] --><md-list flex="" ng-repeat="column in [1,2,3]" role="list" class="ng-binding ng-scope flex">

        <!-- ngRepeat: button in insideDivided.next().value -->
    </md-list><!-- end ngRepeat: column in [1,2,3] --><md-list flex="" ng-repeat="column in [1,2,3]" role="list" class="ng-binding ng-scope flex">

        <!-- ngRepeat: button in insideDivided.next().value -->
    </md-list><!-- end ngRepeat: column in [1,2,3] --><md-list flex="" ng-repeat="column in [1,2,3]" role="list" class="ng-binding ng-scope flex">

        <!-- ngRepeat: button in insideDivided.next().value -->
    </md-list><!-- end ngRepeat: column in [1,2,3] -->

Why ng-repeat work, but don't create md-list-items?

Upvotes: 0

Views: 303

Answers (1)

adam0101
adam0101

Reputation: 30995

ng-repeat isn't aware of generators. You need to convert it to an array first and iterate over that.

Here is the issue on github. https://github.com/angular/angular.js/issues/15202

It looks like they won't be supported anytime soon either.

Upvotes: 1

Related Questions