ng-class not working when called

Question

I have this function in my controller:

$scope.menus = {};
    $http.get('web/core/components/home/nav.json').success(function (data) { $scope.menus = data; $scope.validaMenu(); }).error(function () { console.log('ERRO') });
    $scope.m = {};

    $scope.validaMenu = function () {        

            for (var i = 0; i < $scope.menus.length; i++) {
                $scope.m[$scope.menus[i].name] = { url: $scope.menus[i].url, style:"ativo"};
            }
    };

Inside my JSON i got this:

[

    {"name" : "CAD_Empresa", "url": "#/Cadastro/Empresa"},
    {"name" : "CAD_Perfil", "url": "#/Cadastro/Perfil"},
    {"name" : "CAD_PlanoConta", "url":  "#/Cadastro/PlanoConta"},
    {"name" : "CAD_CentroCusto", "url": "#/Cadastro/CentroCusto"},
    {"name" : "CAD_TipoDocumento", "url": "#/Cadastro/TipoDocumento"},
    {"name" : "CAD_ParceiroComercial", "url":  "#/Cadastro/ParceiroComercial"}
]

And this is my HTML:

<ul class="multi-column-dropdown">    
<li><a ng-class="{{m['CAD_Usuario'].style}}" ng-href="{{m['CAD_Usuario'].url}}" >Usuário</a></li>
<li><a ng-class="{{m['CAD_Empresa'].style}}" ng-href="{{m['CAD_Empresa'].url}}" >Empresa</a></li>
</ul>

This code take my JSon and create a link that my ng-route redirects to another page. All I want to do is, show a cursor not-allowed on < li > options that doesn't have any link. To do that, I created the function above and forced on my CSS the cursor like this:

.multi-column-dropdown li a {
    cursor: not-allowed;
}

That's ok, it's working. But, you could check that I created a custom class using ng-class on my HTML right? When I try to set anything on my css using my clas (ativo) i doesn't change anything.

Any idea why my ng-class are being ignored?

Answer 1

Remove the double curly braces {{}}. ng-class expects an expression.

<li><a ng-class="m['CAD_Usuario'].style">