在angularjs中显示动态选项菜单的最佳(最有效)方式

发布时间：2020-12-17 07:00:17 所属栏目：安全来源：网络整理

导读：假设我们在UI中有很多项目.当用户单击某个项目时,UI应该显示一个弹出/拨号/覆盖元素,其中包含一些选项,操作等. 目前我看到两个选项：复制每个项目的叠加元素并将其隐藏,直到单击关联的项目.喜欢这个小提琴：http://jsfiddle.net/urPww/1/ div ng-show =“cu

假设我们在UI中有很多项目.当用户单击某个项目时,UI应该显示一个弹出/拨号/覆盖元素,其中包含一些选项,操作等.

目前我看到两个选项：

>复制每个项目的叠加元素并将其隐藏,直到单击关联的项目.喜欢这个小提琴：http://jsfiddle.net/urPww/1/

< div ng-show =“currentItem”>
????????显示以下选项：{{currentItem.name}}
????< / DIV>
????< li ng-repeat =“项目中的项目”ng-click =“showOptions(item)”>
????????{{项目名称}}
????< /锂>
>放置覆盖UI一次并跟踪最后点击的项目.演示：http://jsfiddle.net/aVnPT/5/

< li ng-repeat =“项目中的项目”ng-click =“showOptions(item)”>
????????{{项目名称}}
????????< span ng-show =“item.showingOptions”>
????????????< br />显示以下选项：{{item.name}}
????????< /跨度>
????< /锂>

第一种解决方案效率不高.然而,除了第二个中单击的元素之外,我无法弄清楚如何显示叠加UI.有任何想法吗？

解决方法

您可以通过将$event作为参数传递给ng-click函数来使用单个元素.然后可以获得相对于文档的鼠标点击位置

app.directive('container',function () {

    var offset = {
        left: 40,top: -20
    }
    return function (scope,element,attributes) {
        var $oLay = angular.element(document.getElementById('overlay'))

        scope.showOptions = function (item,$event) {       
            var overlayDisplay;
            if (scope.currentItem === item) {
                scope.currentItem = null;
                 overlayDisplay='none'
            }else{
                 scope.currentItem = item;
                overlayDisplay='block'
            }

            var overLayCSS = {
                left: $event.clientX + offset.left + 'px',top: $event.clientY + offset.top + 'px',display: overlayDisplay
            }

             $oLay.css(overLayCSS)
        }
    }
});

我不确定是否将jQuery对不同浏览器的方式规范化为clientX和clientY.并非所有浏览器都对事件位置属性使用相同的约定已从overlay元素中删除了ng-show,因此它的样式属性可以从指令控制,而不是由角度编译器控制由于时间,并给它一个id.

演示：http://jsfiddle.net/jJyTf/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!