New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wants to merge 2 commits into
base: master
from

Conversation

Projects
None yet
6 participants
@bfanger
Contributor

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

This comment has been minimized.

Show comment
Hide comment
@petebacondarwin

petebacondarwin Nov 10, 2013

Member

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

Member

petebacondarwin commented Nov 10, 2013

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

@bfanger

This comment has been minimized.

Show comment
Hide comment
@bfanger

bfanger Nov 11, 2013

Contributor

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

Contributor

bfanger commented Nov 11, 2013

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

@bfanger

This comment has been minimized.

Show comment
Hide comment
@bfanger

bfanger Jan 22, 2014

Contributor

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

Contributor

bfanger commented Jan 22, 2014

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

@bhollis

This comment has been minimized.

Show comment
Hide comment
@bhollis

bhollis 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?

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

This comment has been minimized.

Show comment
Hide comment
@carlosbaraza

carlosbaraza Mar 16, 2015

Any news on this?

Thank you.

carlosbaraza commented Mar 16, 2015

Any news on this?

Thank you.

@petebacondarwin

This comment has been minimized.

Show comment
Hide comment
@petebacondarwin

petebacondarwin Mar 16, 2015

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

Member

petebacondarwin commented Mar 16, 2015

@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

bfanger added some commits Nov 6, 2013

ngClass: Add support for conditional map in an array.
Allows for ng-class expressions, like:
<div ng-class=" [classVar, {'is-active': activeVar }] ">
@bfanger

This comment has been minimized.

Show comment
Hide comment
@bfanger

bfanger Mar 17, 2015

Contributor

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

Contributor

bfanger commented Mar 17, 2015

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

netman92 added a commit to netman92/angular.js that referenced this pull request Aug 8, 2015

feat(ngClass): add support for conditional map within an array.
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 #4807
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment