我尝试在 mdVirtualRepeat 上使用 mdInkRipple 指令,但遇到了 md-ink-ripple 会影响整个虚拟重复容器的问题。这是我的代码。
<md-virtual-repeat-container md-auto-shrink="true">
<div md-virtual-repeat="obj in controller.data" ng-click="null" md-ink-ripple>
<div class="key-repeated" layout="column" layout-align="center start">
<p class="md-title" style="margin-bottom: 0px;">{{ obj.text }}</p>
<p class="md-body-1">{{ obj.caption }}</p>
</div>
</div>
</md-virtual-repeat-container>
最佳答案
一种选择是引入 md-list
作为 md-virtual-repeat-container
的父级,并使其子级 md-list-item
- CodePen
标记
<md-content layout="column">
<md-list>
<md-virtual-repeat-container id="vertical-container">
<md-list-item md-virtual-repeat="item in ctrl.dynamicItems" md-on-demand="" class="repeated-item" flex="" md-ink-ripple>
{{item}}
</md-list-item>
</md-virtual-repeat-container>
</md-list>
</md-content>
此外,如果 md-list-item
具有 ng,则默认情况下会存在 md-ink-ripple (并且还有一个不错的鼠标悬停效果) -click
属性 - CodePen
标记
<md-content layout="column">
<md-list>
<md-virtual-repeat-container id="vertical-container">
<md-list-item md-virtual-repeat="item in ctrl.dynamicItems" md-on-demand="" class="repeated-item" flex="" md-ink-ripple ng-click="hello()">
{{item}}
</md-list-item>
</md-virtual-repeat-container>
</md-list>
</md-content>
JS
.controller('AppCtrl', function($timeout, $scope) {
$scope.hello = function() {
console.log("Hello!");
}
CSS
.virtualRepeatdemoDeferredLoading .repeated-item {
height: initial;
}
关于javascript - mdInkRipple 波纹整个 mdVirtualRepeat - Angular Material ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38044101/