ng-class conditional doesn't work

Question

I have an angular directive named fund. The directive is defined as follows.

return{
  restrict: 'E',
  replace: true,
  scope: {
    data: '=',
    cut: '@'
    },
  templateUrl: 'app/directives/partials/fund.jsp'
}

It has a property named cut. If cut is set, I will apply text-cut class, and if not set, no class. The class is as follows in case needed:

.text-cut{
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis
}

I have tried the using the directive as:

<fund data="myCtrl.fundList" cut="true"></fund>

<fund data="myCtrl.fundList" cut="'true'"></fund>

with following ng-class attributes in the template:

ng-class="text-cut: cut"
ng-class="text-cut: 'cut'"
ng-class="{text-cut: cut}"
ng-class="{text-cut: 'cut'}"
ng-class="text-cut: cut===true"
ng-class="text-cut: 'cut'===true"
ng-class="{text-cut: cut===true}"
ng-class="{text-cut: 'cut'===true}"

But none of these combinations applied text-cut class to my fund directive. Where is the mistake?

Answer 1

You have to quote text-cut. Try

ng-class="{'text-cut': cut}"