Angular JS：如何獲取與$ scope中的對象關聯的元素的座標

有一個網站左列有一些過濾器：複選框和文本字段。在主列中，有一組項目按左列中提供的值過濾。如果用戶更改過濾器列中的任何值，則使用「過濾器」按鈕（以及一些過濾的項目），一個小的浮動元素顯示接近更改的值。在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/

是否有AngularJS一個優雅的方式來獲得與NG-模型assotiated或NG創建一個改變的輸入元素的座標-重複？或者它應該與一個jQuery實現？

我可以捕獲ng單擊過濾器塊並存儲點擊的座標，但用戶可以使用鍵盤在元素之間移動。

來源

2016-09-10 AVKurov

爲什麼不只是在每一行上放一個按鈕，而不是試圖重新定位一個按鈕？ – rob

@rob，因爲我控制一個浮動塊而不是很多元素更簡單。無論如何，據我所知，每行一個按鈕不會幫助我識別更改的輸入 – AVKurov

您可以通過使用角度js來簡化。 ng-repeat可以代替書寫標籤並輸入多次。你可以給一個對象或值，以納克重複的陣列（參閱：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>

和過濾器按鈕可以顯示或隱藏當輸入元件被改變，使得我們能夠避免CSS和顯示的計算按鈕。

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

您也可以處理鍵盤事件，例如通過NG-重點元素標籤。

來源

2016-09-10 14:46:42 vbharath

這是一個有趣的解決方案，謝謝。但是我的過濾器表單有很多輸入和幾個部分，並且可能會很複雜，以便管理這些數量的過濾器按鈕。但也許我可以使用ng-change。我再看看吧。 – AVKurov

Angular JS：如何獲取與$ scope中的對象關聯的元素的座標

回答

相關問題