CODEWITHSUNDEEP
javascriptjqueryangularjs
AVKurov
AVKurov

Reputation: 154

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

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.

Upvotes: 2

Views: 424

Answers (1)

bvakiti
bvakiti

Reputation: 3611

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.

Upvotes: 1

Related Questions