1

It does not matter how large your for loop is, AngularJS doesn't render anything to HTML unless the loop has finished. But it should render to HTML as $scope changes (as happens in two-way data binding). A pen is created for this.

Have I misunderstood anything?

Paulie-C
  • 1,674
  • 1
  • 13
  • 29
Vahid Najafi
  • 4,654
  • 11
  • 43
  • 88
  • 1
    I think because all static code inside controller executes synchronously, and then $scope.$apply fires, so it is the reason why you have all 20 items at once. – Leguest Apr 15 '17 at 17:11
  • I think is that for angular version. see this sample with version 1.6.1 http://plnkr.co/edit/un6G6SATEiSKWNqlKHgy?p=preview – Hadi J Apr 15 '17 at 17:17
  • @HadiJeddizahed No, it doesn't. See with more data. about 50000. http://plnkr.co/edit/CwcWojGxkH00iCkreLYp?p=preview – Vahid Najafi Apr 15 '17 at 17:27
  • consider this point that angular digest cycle is 10. if you loop less than 10 it's work correctly. http://plnkr.co/edit/ECprLVJjoeHt8cfouImJ?p=preview – Hadi J Apr 15 '17 at 17:27
  • @Leguest Good idea. Reasonable. – Vahid Najafi Apr 15 '17 at 17:29

1 Answers1

1

You can force re-render manually with $timeout, see codepen: https://codepen.io/anon/pen/eWNmap - it's important that separated function was created due to asynchronous $timeout i always has 20 value because of JS closure: https://stackoverflow.com/a/750506/3368498 But this behavior is OK, angular re-render when it starts digest cycle - and if it will start with any change, it will be crazy slow. All in all, you can think about it as you wrote, when 2-way binding change it is re-rendered - cases when this behavior matches are very rare.

Community
  • 1
  • 1
Radek Anuszewski
  • 1,812
  • 8
  • 34
  • 62