Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

ngClass: Add support for conditional map in an array. #4807

Closed
wants to merge 2 commits into from
Closed

ngClass: Add support for conditional map in an array. #4807

wants to merge 2 commits into from

Conversation

bfanger
Copy link
Contributor

@bfanger bfanger commented Nov 6, 2013

Allows for ng-class expressions, like:

<div ng-class=" [classVar, {'is-active': activeVar }] ">

Which allows a directive to apply classes it got via attributes in conjunction with conditional classes.

{
    scope: {
       classVar: '@myBodyClass'
    }
}

The current situation:
(Assuming classVar is set to "panel" and activeVar is true)

Using a map inside an array sets the class to "panel [Object object]"

Using a map like {classVar: true, 'is-active': activeVar } would set the class to "classVar is-active" instead of the desired "panel is-active"

@petebacondarwin
Copy link
Member

@bfanger - can you ensure that you have signed the CLA?

@bfanger
Copy link
Contributor Author

bfanger commented Nov 11, 2013

I've just signed the "Google Individual Contributor License Agreement, v1.1"

@bfanger
Copy link
Contributor Author

bfanger commented Jan 22, 2014

Rebased changes on v1.2.9 (makes travis-ci happy)

@bhollis
Copy link

bhollis commented May 7, 2014

I was just about to file a feature request for this! Is there something that could be done to make this more amenable to being merged?

@carlosbaraza
Copy link

Any news on this?

Thank you.

@petebacondarwin
Copy link
Member

@bfanger - OK, this is a reasonable feature. If you can add documentation for it we can try to get it into 1.4 otherwise it will slip to 1.5, I think

@petebacondarwin petebacondarwin modified the milestones: 1.4.x, Backlog, 1.4.0-beta.7 / 1.3.16 Mar 16, 2015
Allows for ng-class expressions, like:
<div ng-class=" [classVar, {'is-active': activeVar }] ">
@bfanger
Copy link
Contributor Author

bfanger commented Mar 17, 2015

Travis CI failed on 02f8020 (trailing whitespace) which was quickly fixed in 07d2a97

netman92 pushed a commit to netman92/angular.js that referenced this pull request Aug 8, 2015
This change allows `ngClass` expressions to have both objects and strings
within an array:

```js
$scope.classVar = 'nav-item';
$scope.activeVar = true;
```

```html
<div ng-class=" [classVar, {'is-active': activeVar }] ">
```

In this case, the CSS classes that will be added are: 'nav-item' and 'is-active'.

Closes angular#4807
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants