Angular JS：$ scope内のオブジェクトに関連付けられた要素の座標を取得する方法

Question

左の列にいくつかのフィルタ（チェックボックスとテキストフィールド）があるサイトがあります。メイン列には、左側の列に示された値でフィルタリングされた一連の項目があります。ユーザーがフィルター列の値を変更すると、小さなフローティング要素が「フィルター」ボタン（およびフィルターされた項目の数）によって変更された値に近く表示されます。このロジックをjQueryに実装するのは難しくありません。

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

https://jsfiddle.net/qgzezs9L/

NG-モデルでassotiatedかNGで作成、変更入力要素の座標を取得するにはAngularJSでエレガントな方法があります：それは、この（非常に単純化した例）のようになります-繰り返す？それとも、jQueryで実装する必要がありますか？

フィルタブロックをng-clickしてクリック座標を保存できますが、ユーザーはキーボードを使用して要素間を移動できます。

Answer 1

角度jを使用すると簡略化できます。 ng-repeatは、ラベルを書き込んで何度も入力する代わりに使用できます。入力要素が変更されたとき、我々はCSSの計算を回避し、表示することができるように

<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> 

とフィルタボタンが表示または非表示にすることができます：あなたは（https://docs.angularjs.org/api/ng/directive/ngRepeat参照）NG-繰り返しをする値のオブジェクトまたは配列を与えることができますボタン。あなたはまた、要素のngのフォーカスをタブのようなキーボードイベントを処理することができます

コードhttp://jsbin.com/nibiqazaca/edit?html,css,js,output

。