Search code examples
angularjsangularjs-ng-class

Inject scope in ng-class


my problem is simple: i'm doing this:

<div class="text-center tag row class_{{infoticket.tags[0]}}">{{infoticket.tags[0]}}</div>
<div ng-repeat="item in ticketcontent track by $index">
    <div style="display: block" 
         class="container row col-md-offset-1 col-md-8" 
         ng-class="{true: 'agent', false: 'collab_infoticket.tags[0]'}
                   [item.author_id == 591119252 || 
                    item.author_id == 619780882 || 
                    item.author_id == 653783901 || 
                    item.author_id == 645192392 || 
                    item.author_id == 513340771 || 
                    item.author_id == 513345171]">
        <div ng-class="mybind"   ng-bind-html="item.html_body"></div>
        <div>{{item.created_at | date}}</div>
        <div ng-switch="item.author_id">
            <div ng-switch-when="591119252">Agent: Mystique</div>
            <div ng-switch-when="619780882">Agent: Batman </div>
            <div ng-switch-when="653783901">Agent: Superman </div>
            <div ng-switch-when="645192392">Agent:Iron Man </div>
            <div ng-switch-when="513340771">Agent:Green Hornet </div>
            <div ng-switch-when="513345171">Agent:Tornade </div>
            <div ng-Switch-Default>Collaborateur: {{myname}}</div>
        </div>
    </div>

The problem is most of the time my class in css collab_infoticket.tags[0] is not working so i would like to know if it comes from a syntax problem. Which is weird is that sometimes it works ! However this class_{{infoticket.tags[0]}}always works.


Solution

  • I'm not sure what you're trying to do in that ng-class is valid syntax. Try a ternary operator instead:

    ng-class="(item.author_id == 591119252 || 
               item.author_id == 619780882 || 
               item.author_id == 653783901 || 
               item.author_id == 645192392 || 
               item.author_id == 513340771 || 
               item.author_id == 513345171) 
    ? 'agent' : collab_infoticket.tags[0]}">
    

    Note that collab_infoticket.tags[0] should be unquoted if you want the contents of that variable set as the classname; if quoted as you had it, you'll get the variable name itself as the classname.

    (Or better still, calculate all of this inside the directive or controller, this is probably too much logic to be embedding in the template.)