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

Closed
wants to merge 2 commits into
from

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
Member

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

@bfanger
Contributor
bfanger commented Nov 11, 2013

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

@bfanger
Contributor
bfanger commented Jan 22, 2014

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

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

Any news on this?

Thank you.

@petebacondarwin
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

bfanger added some commits Nov 6, 2013
@bfanger bfanger ngClass: Add support for conditional map in an array.
Allows for ng-class expressions, like:
<div ng-class=" [classVar, {'is-active': activeVar }] ">
b48c5ae
@bfanger bfanger Added documentation for ngClass array with map syntax
07d2a97
@bfanger
Contributor
bfanger commented Mar 17, 2015

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

@petebacondarwin petebacondarwin added a commit that closed this pull request Mar 19, 2015
@bfanger @petebacondarwin bfanger + petebacondarwin 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
4588e62
@netman92 netman92 added a commit to netman92/angular.js that referenced this pull request Aug 8, 2015
@bfanger @netman92 bfanger + netman92 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
c61fbc1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment