Angular Dart - execute a function right after ng-repeat has finished

Question

Searching stackoverflow for this question always give me the solution for Angular.js.

How would you do this in Anuglar dart?

That is I want to have a function run after an ng-repeat directive in angular dart has finished rendering its elements.

EDIT:

It turns out that knowing when ng-repeat has finished enumerating doesn't means the appropriate dom element has being attached to the document.

I guess my intended question was how to determine when all elements enumerated by ng-repeat is attached to the dom tree and can be queried by selector

EDIT2

<div ng-repeat='fruit in fruits'>
 <li class="fruit">{{fruit}}</li>
</div>
querySelectorAll('.fruit'); // should return all <li> element created by ng-repeat
                            // the trick is knowing when and where to call querySelectorAll

Thanks

Would have helped if you had linked that Angular.js question. What do you actually mean by when ng-repeat has finished. After the first generation of the items? What about updates? — Günter Zöchbauer

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-03-30T20:15:03

I tried {{foo($last)}} and it didn't work for me either.

This example uses MutationObserver to get notified about added elements. I tried it and it worked.

<!DOCTYPE html>
<html>
  <head>
    <script src="packages/shadow_dom/shadow_dom.debug.js"></script>
  </head>
  <body ng-cloak>
    <ul somefruits>
     <li ng-repeat='fruit in ctrl.fruits track by $index'
     class="fruit" ng-class="{'ng-last': $last}">{{fruit}}</li>
    </ul>

    <script type="application/dart" src="index.dart"></script>
    <script type="text/javascript" src="packages/browser/dart.js"></script>

  </body>
</html>

library angular_default_header.main;

import 'dart:html';
import 'package:angular/angular.dart';

@NgController(selector: '[somefruits]', publishAs: 'ctrl')
class Fruits {
  Fruits(){
    print('fruits created');
  }

  List fruits = ['Apple', 'Banana', 'Orange', 'Kiwi'];
}


class MyAppModule extends Module {
  MyAppModule() {
    type(Fruits);
  }
}

void mutationCallback(List<MutationRecord> mutations, MutationObserver observer) {
  mutations.forEach((mr) {
    mr.addedNodes.forEach((Node n) {
      if(n is Element) {
        if(n.classes.contains('ng-last')) {
          print('last added');
          observer.disconnect();
          n.style.border = '1px solid red';
        }
      }
    });
  });
}

main() {
  print('main');
  var ul = document.querySelector('ul');
  new MutationObserver(mutationCallback).observe(ul, childList: true);
  ngBootstrap(module: new MyAppModule());
}

Angular Dart - execute a function right after ng-repeat has finished

3 Answers