2017-07-06 47 views
0

發電機:AngularJS,mdList,NG-重複和發電機

$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(); 

模板:

<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> 

指令{{log(button)}}寫正確的項目來安慰

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"} 
.... 

但只有建立空<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] --> 

爲什麼ng-repeat工作,但不要create md-list-item s?

PS一些文字,因爲「看起來您的文章主要是代碼;請添加一些更多的細節。」

回答

1

ng-repeat不知道生成器。你需要先將它轉換爲數組,然後迭代。

這是github上的問題。 https://github.com/angular/angular.js/issues/15202

看起來他們不會很快得到支持。

+0

生成器返回類似'Object {value:yielded_value,done:false}'的對象。迭代通過這個原因有兩個步驟'yielded_value'和'false'。在我的情況'yielded_value'是我的迭代數組 – rjhdby

+0

@rjhdby請參閱我更新的答案。 ngRepeat不能使用生成器函數。您需要首先將值推入數組,然後讓ngRepeat迭代該值。 – adam0101