[Solved] – AngularJS – How do I conditionally apply CSS styles ?

How do I conditionally apply CSS styles ?

Asked on October 18, 2018 in AngularJs.
Add Comment


  • 3 Answer(s)

    Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope.

    To reach up the parent scope, use have to use that $index.

    <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials">
        {{tutorial.name}}
    </li>
    
    Answered on October 18, 2018.
    Add Comment
    span class="circle circle-{{selectcss(document.Extension)}}">
    

    and code

    $scope.selectcss = function (data)
    {
        if (data == '.pdf')
            return 'circle circle-pdf';
        else
            return 'circle circle-small';
    };
    

    css

    .circle-pdf
    {
        width: 24px;
        height: 24px;
        font-size: 16px;
        font-weight: 700;
        padding-top: 3px;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        background-image: url(images/pdf_icon32.png);
    }
    
    Answered on October 18, 2018.
    Add Comment

    This is the solution that helps for.

    <a ng-style="{true: {paddingLeft: '25px'}, false: {}}[deleteTriggered]">...</a>
    
    
    Answered on October 18, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.