ngclass does not apply

Issue

I am trying to create a div that will change its size based on a variable within scope. (angular 1.7.8)

I have <div ngClass="{{getClass()}}"> and I believe the function is binding correctly because when I load the web page and inspect the element it shows

<div ngclass="{"column-20":false,"column-25":true}">

For reference the getClass function looks like this

$scope.getClass = function() {
            return {'column-20': $scope.<thing> != "value",
                'column-25': $scope.<thing> == "value"}
        }

Even though it seems to be showing the correct logic I am not seeing the class applied to the div.

Thanks

Solution

ngClass doesn't work in this way.

ngClass activate a class if some related model is true. For your example:

<div ng-class="{'column-20': thing1,'column-25': thing2}">

somewhere in your controller:

$scope.thing1 != "value"
$scope.thing2 != "value"

Documentation: https://docs.angularjs.org/api/ng/directive/ngClass

Edit: hyphen works with single quote

Answered By - Mork