Multiple dropdown menus using AngularJs + Materialize.css

Question

I'm experiencing an annoying issue that I cannot fix. I'm using AngularJs to display a series of cards, each one having its own dropdown menu.

Here's the code:

<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>

When I run the code I got:

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

in

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

What's the right way to write the expression to tell the element to activate the corresponding id. What's the correct way to use a materialize.css dropdown inside a ng-repeat directive?

To complete the request here's the activation code in the "dropdown" directive

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

Thanks everyone!

EDIT

I've found this question, which seems related

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

As suggested there, I've tried to add the ng-attr- prefix on both the attributes ("id" and "data-activation"). Unfortunately it doesn't work for me. This actually gets rid of the error message, but the dropdown menus don't show up, even if the "active" class is successfully attached to the dropdown button, the dropdown content remains hidden. Could it be related to the fact that my directive is looped inside a ngRepeat directive?

Thanks anyone for your help or feedback.

Here's the code after the edit, which unfortunately still doesn't work

<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>

I really could use a help here, really stuck. Thanks guys. – Simentesempre Oct 19 '17 at 07:32 — Simentesempre, Oct 19 '17 at 07:32

score 0 · Answer 1 · answered Oct 17 '17 at 13:51

0

cardMoreActions is a function i think so you have to change to cardMoreActions({{eedback.FeedbackTrackerId}})

I hope this helped you.

answered Oct 17 '17 at 13:51

BEN AHMED EL HABIB

29
2

"cardMoreActions" isn't a function. The content of the data-activates directive should be the same of the dropdown-content id, in order for the dropdown to work in materialize.css - http://materializecss.com/dropdown.html – Simentesempre Oct 17 '17 at 14:43

score 0 · Accepted Answer · answered Oct 25 '17 at 09:09

This solves the problem

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

Multiple dropdown menus using AngularJs + Materialize.css

2 Answers2

Linked