Angular JS: how to get coordinates of element associated with an object in $scope

By : AVKurov

There is a site that has a left column with some filters: checkboxes and text fields. In a main column there is a set of items filtered by values provided in the left column. If user changes any value in the filter column a small floating element shows up near changed value with a 'Filter' button (and a number of filtered items). It is not so hard to implement this logic in a jQuery. It will be something like this (very simplified example):

$('.filter_block').find('input').on('change', function() {
  var box = this.getBoundingClientRect();
  var top =;
  $('.floating').css('top', top).show();

Is there an elegant way in AngularJS to get a coordinates of a changed input element that assotiated with ng-model or created with ng-repeat? Or it should be implemented with a jQuery?

I can catch ng-click on a filter block and store a coordinates of a click but user can use a keyboard to move between elements.

By : AVKurov


You can simplify by using angular js. ng-repeat can be instead of writing label and input several times. You can give a object or array of values to ng-repeat (refer:

<div class='filter_block'>
        <div ng-repeat="opt in options track by $index">
            <label for='{{}}'>{{'Checkbox' + ($index + 1)}}</label>
            <input type='checkbox' value={{$index}} id='{{}}' ng-blur="showFilter = false" ng-change="showFilter = true" ng-model="_model_"/>
            <div ng-show="showFilter" class='floating'>                   
               <input type='text' value=''/>

And filter button can be shown or hidden when the input element is changed so that we can avoid the calculation of css and displaying button.


You can also handle keyboard events like tab through ng-focus on the elements.

By : bvakiti

The "using" keyword makes a member of an inherited class visible, and resolvable, in the scope of its subclass. So, to make the privately-inherited member available to B's subclasses:

class A {


    void foo() {}

class B : private A {


    using A::foo;

class C : public B {

    void bar()

An item of type undefined (and it is a type) has no length property - only items of type string and array do. Therefore, as @redneb notes, extend your condition to check for a non-falsy value before checking length.

if (myVar && myVar.length) { ... }
By : Utkanos

This video can help you solving your question :)
By: admin