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/

AngularJS中是否有一种优雅的方法来获取与ng-model相关或使用ng-repeat创建的已更改输入元素的坐标？或者它应该用jQuery实现？

我可以点击过滤器块并存储点击的坐标，但用户可以使用键盘在元素之间移动。

Answer 1

您可以使用角度js进行简化。 ng-repeat可以代替多次写入标签和输入。您可以为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-focus对元素进行选项卡。

Angular JS：如何获取与$ scope中的对象关联的元素的坐标

1 个答案: