使用AngularJs + Materialize.css的多个下拉菜单

时间:2017-10-17 13:08:00

标签: javascript css angularjs materialize

您好我遇到了一个令人讨厌的问题,我无法修复。 我正在使用AngularJs来显示一系列卡片,每个卡片都有自己的下拉菜单。

以下是代码:

<div ng-repeat="feedback in feedbacks"  
    class="card">
    <div class="cardMoreActionsButton">
        <a  class="dropdown-button" 
            dropdown 
            href="#"  
            data-activates="cardMoreActions{{feedback.FeedbackTrackerId}}">
            <i class="material-icons grey-icon">more_vert</i>
        </a>
        <ul id="cardMoreActions{{feedback.FeedbackTrackerId}}" 
            class="dropdown-content">
            <li>
                <a ng-click="archiveFeedback(feedback.FeedbackTrackerId)">
                     Archive feedback
                </a>
            </li>
        </ul>
    </div>
    Card content
</div>

当我运行代码时,我得到了:

Error: Syntax error, unrecognized expression: #cardMoreActions{{feedback.FeedbackTrackerId}}

in

<a class="dropdown-button" dropdown="" href="#" data-activates="cardMoreActions{{feedback.FeedbackTrackerId}}">

编写表达式以告诉元素激活相应的id的正确方法是什么。 在ng-repeat指令中使用materialize.css dropdwn的正确方法是什么?

要在此完成请求,请参阅“下拉”指令中的激活码

TK.directive('dropdown', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.dropdown();
        }, 
    }
});

谢谢大家!

修改

我发现这个问题似乎很相关

Creating a custom materialize directive that works with an {{expression}} in data-activates attribute

正如那里所建议的那样,我试图在两个属性上添加ng-attr-前缀(“id”和“data-activation”)。 不幸的是,它对我不起作用。 这实际上消除了错误消息,但下拉菜单没有显示,即使“活动”类成功附加到下拉按钮,下拉内容仍然隐藏。 它可能与我的指令在ngRepeat指令中循环这个事实有关吗?

感谢任何人的帮助或反馈。

这是编辑后的代码,遗憾的是仍然无法正常工作

<div ng-repeat="feedback in feedbacks"  
    class="card">
    <div class="cardMoreActionsButton">
        <a  class="dropdown-button" 
            dropdown 
            href="#"  
            ng-attr-data-activates="cardMoreActions{{feedback.FeedbackTrackerId}}">
            <i class="material-icons grey-icon">more_vert</i>
        </a>
        <ul ng-attr-id="cardMoreActions{{feedback.FeedbackTrackerId}}" 
            class="dropdown-content">
            <li>
                <a ng-click="archiveFeedback(feedback.FeedbackTrackerId)">
                     Archive feedback
                </a>
            </li>
        </ul>
    </div>
    Card content
</div>

2 个答案:

答案 0 :(得分:0)

cardMoreActions是我认为的功能,因此您必须更改为from functools import * totalclient=[['5', '110'], ['9', '500'], ['20', '400']] totalhouse=[['10', '100'], ['2', '200'], ['30', '300']] a1 = [] a2 = [] for i in totalclient: aa = map((lambda x:int(x)),i) a1.append(list(aa)) totalclient = a1 for i in totalhouse: aa = map((lambda x:int(x)),i) a2.append(list(aa)) totalhouse = a2 print(totalclient) print(totalhouse)

我希望这对你有所帮助。

答案 1 :(得分:0)

这解决了问题

TK.directive('dropdown', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.ready(function(){
                elem.dropdown();
            });         
        }, 
    }
});