Inspecting Angular Forms

Thursday, Oct 24, 2013 11:38 am
William Barnes

I have a long, multi-part Angular form on my <a href=”http://www.divorces.ca/” title=”Toronto Uncontested Divorces – Lawyer Prepared”>new website</a>. At a certain point, I began to find it difficult to review the source to ensure that the model being produced lined up with the output I wanted, so I wrote a bookmarklet that displays the ngModel attribute above each form control.

The current version unfortunately requires jQuery to be used on the page.

  1. javascript:$('.debugAngular').remove();$("[ng-model]").each(function(i, el){ var pos = $(el).offset(); varNewEl = $("body").append('<div style="position:absolute;z-index:9999;top:'+(pos.top-15)+'px;left:'+pos.left+'px;background:#000;color:#fff" class="debugAngular">'+$(el).attr("ng-model")+'</div>') });