AngularJS ngClass expression and array combination

Question

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.

an idea that you could try, is to create another container, inside or outside... not the best solution though — inubs
– inubs, Commented Sep 5, 2016 at 16:40
ng-class is rather simple directive, you can always make your own, that does exactly what you want. Accepts arrays or whatever. — Petr Averyanov
– Petr Averyanov, Commented Sep 5, 2016 at 16:53

Felipe · Accepted Answer · 2018-04-11 15:00:25Z

3

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

edited Apr 11, 2018 at 15:00

answered Mar 21, 2018 at 6:04

Felipe

12.1k8 gold badges47 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikhilesh Shivarathri · Accepted Answer · 2016-09-05 16:59:41Z

1

It is better to have the ng-class assigned to a variable in the scope. i.e ng-class = customClasses

and in the controller something like this. Doing this makes you have a complete control on what classes must be applied on the modal.

EDIT: Check this sample application in plnkr

$scope.customClasses = {
   'is-msg': $scope.message.type == 'msg',
   'height-limit': $scope.message.hasHeight,
   "h-md" : true, 
   "text-info": true
};

edited Sep 5, 2016 at 16:59

answered Sep 5, 2016 at 16:49

Nikhilesh Shivarathri

1,68011 silver badges16 bronze badges

4 Comments

Nhan Over a year ago

We still have to pre-define the classes, I would like to pass any class I want.

Nikhilesh Shivarathri Over a year ago

I would like to pass any class I want what does this actually mean ?

Nhan Over a year ago

Misunderstood, I see what you mean, but I sitll need to use the expressions, they are needed in other parts of the application.

Nikhilesh Shivarathri Over a year ago

@Nhan Please accept the answer if it solved your case. It can help others too :)

Collectives™ on Stack Overflow

AngularJS ngClass expression and array combination

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related