Search code examples
javascriptangularjsng-class

AngularJS ngClass expression and array combination

I currently have the following expression in ng-class, in the view of an AngularUI Bootstrap modal:

<div class="modal-body mdl-body"
     ng-class="{ 'is-msg': vm.message.type == 'msg',
                 'height-limit': vm.message.hasHeight }">

But I also want to pass an array of custom classes, like this:

ng-class="vm.message.classes"

This is where the modal is called in controller:

modalService.open({
  type: "okay",
  title: "Terms & Conditions",
  content: $scope.APISettingData.signup_term_and_condition,
  classes: ["h-md", "text-info"],
  isHtml: true,
  hasHeight: true
});

Both ways works without each other but they didn't work when I tried to combine them.

Is it possible to do this? Please advise me some ideas and solutions.

Solution

  • There is another syntax that looks like this

    <div ng-class="[custom1, custom2, {'text-danger': isBadJuJu()}]">Some Text</div>

    Where custom1 and custom2 are variables within the scope of your controller, and the {} is a set of expressions, much like the syntax you are using in your first example