我有一个元素列表(水平显示)和一个下拉列表。我试图了解如何在窗口调整大小时将元素从水平列表移动到下拉列表。基本上我只有一排可以放我的东西。如果它不适合(添加列表项宽度)，我想将它们放在下拉列表中。我正在使用 angularjs。
<div class="name-list">
<ul class="horizontal">
<li><a href="#">item 1</a>
</li>
<li><a href="#">item 2</a>
</li>
<li><a href="#">item 3</a>
</li>
</ul>
</div>
<div class="dropdown more-names">
<button>More</button>
<ul class="dropdown">
<li><a href="#">item 4</a>
</li>
<li><a href="#">item 5</a>
</li>
<li><a href="#">item 6</a>
</li>
</ul>
</div>最佳答案
只需在 Controller 中设置 $watch 即可:
$scope.$watch(function() {
return $window.innerWidth;
}, function(value) {
console.log('window inner width is now', value);
yourFunctionToMoveListItem();
});
你应该使用 $window 服务，而不是 javascript window，因为它更安全......引用文档:
While window is globally available in JavaScript, it causes testability problems, because it is a global variable. In angular we always refer to it through the $window service, so it may be overridden, removed or mocked for testing.
关于javascript在窗口调整大小时移动列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37046414/