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

By : AVKurov
Source: Stackoverflow.com
Question!

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 = box.top;
  $('.floating').css('top', top).show();
});

https://jsfiddle.net/qgzezs9L/

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


Answers

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: https://docs.angularjs.org/api/ng/directive/ngRepeat)

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

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.

Code http://jsbin.com/nibiqazaca/edit?html,css,js,output

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 {

protected:

    void foo() {}
};

class B : private A {

protected:

    using A::foo;
};

class C : public B {

    void bar()
    {
        foo();
    }
};


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