Thursday, October 24, 2013

Inspecting Angular Forms

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. [codesyntax lang="javascript"]
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>') });
[/codesyntax]

Originally posted by William Barnes (Billy Barnes)