Conditionally apply boot strap columns with ng-class

Question

I am trying to use col-sm-9 when a flag is set to false, and col-sm-5 when it is set to true. I'm trying this

<div ng-class="{col-sm-9: !flag, col-sm-5: flag" class="col-sm-offset-3}"></div>

I get a $parse:syntax error at the first hyphen after the {. I've tried putting single quotes around the class names as well and continued to get syntax errors. What am I doing wrong? Also, is it ok if I try to apply that additional class at the end no matter what because they both need applied on the same div?

Edit: syntax from me typing this this morning

try quotes: `'col-sm-9'` (as a class name, and not a scoped variable). Also missing `}` at the end, and should be `` instead of `<\div>` — Aleksey Solovey, Apr 12 '18 at 12:26
Possible duplicate of https://stackoverflow.com/questions/16529825/angularjs-ngclass-conditional — Joseph Webber, Apr 12 '18 at 12:29

score 2 · Accepted Answer · answered Apr 12 '18 at 12:27

2

Try this:-

  <div ng-class="{'col-sm-9': !flag, 'col-sm-5': flag}" class="col-sm-offset-3"><\div>

answered Apr 12 '18 at 12:27

Manish Balodia

1,863
2
23
37

Conditionally apply boot strap columns with ng-class

1 Answers1