From b48c5aea5881e3ef1d7c414e7339475371998b20 Mon Sep 17 00:00:00 2001
From: Bob Fanger <bfanger@gmail.com>
Date: Wed, 6 Nov 2013 14:52:23 +0100
Subject: [PATCH 1/2] ngClass: Add support for conditional map in an array.

Allows for ng-class expressions, like:
<div ng-class=" [classVar, {'is-active': activeVar }] ">
---
 src/ng/directive/ngClass.js      |  7 +++++--
 test/ng/directive/ngClassSpec.js | 11 +++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index d96169042f7..8c259de60e0 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -96,12 +96,15 @@ function classDirective(name, selector) {
     }
 
     function arrayClasses(classVal) {
+      var classes = [];
       if (isArray(classVal)) {
-        return classVal.join(' ').split(' ');
+        forEach(classVal, function(v) {
+          classes = classes.concat(arrayClasses(v));
+        });
+        return classes;
       } else if (isString(classVal)) {
         return classVal.split(' ');
       } else if (isObject(classVal)) {
-        var classes = [];
         forEach(classVal, function(v, k) {
           if (v) {
             classes = classes.concat(k.split(' '));
diff --git a/test/ng/directive/ngClassSpec.js b/test/ng/directive/ngClassSpec.js
index 2b174dcc2a9..0967aa5898f 100644
--- a/test/ng/directive/ngClassSpec.js
+++ b/test/ng/directive/ngClassSpec.js
@@ -63,6 +63,17 @@ describe('ngClass', function() {
     expect(element.hasClass('AnotB')).toBeFalsy();
   }));
 
+  it('should support adding multiple classes via an array mixed with conditionally via a map', inject(function($rootScope, $compile) {
+    element = $compile('<div class="existing" ng-class="[\'A\', {\'B\': condition}]"></div>')($rootScope);
+    $rootScope.$digest();
+    expect(element.hasClass('existing')).toBeTruthy();
+    expect(element.hasClass('A')).toBeTruthy();
+    expect(element.hasClass('B')).toBeFalsy();
+    $rootScope.condition = true;
+    $rootScope.$digest();
+    expect(element.hasClass('B')).toBeTruthy();
+
+  }));
 
   it('should remove classes when the referenced object is the same but its property is changed',
     inject(function($rootScope, $compile) {

From 07d2a9723ccf859386849932edc125fa57e99516 Mon Sep 17 00:00:00 2001
From: Bob Fanger <bfanger@gmail.com>
Date: Tue, 17 Mar 2015 19:05:48 +0100
Subject: [PATCH 2/2] Added documentation for ngClass array with map syntax

---
 src/ng/directive/ngClass.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/ng/directive/ngClass.js b/src/ng/directive/ngClass.js
index 8c259de60e0..3e959c1d3d7 100644
--- a/src/ng/directive/ngClass.js
+++ b/src/ng/directive/ngClass.js
@@ -170,10 +170,14 @@ function classDirective(name, selector) {
        <input ng-model="style1" placeholder="Type: bold, strike or red"><br>
        <input ng-model="style2" placeholder="Type: bold, strike or red"><br>
        <input ng-model="style3" placeholder="Type: bold, strike or red"><br>
+       <hr>
+       <p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p>
+       <input ng-model="style4" placeholder="Type: bold, strike"><br>
+       <input type="checkbox" ng-model="warning"> warning (apply "orange" class)
      </file>
      <file name="style.css">
        .strike {
-         text-decoration: line-through;
+           text-decoration: line-through;
        }
        .bold {
            font-weight: bold;
@@ -181,6 +185,9 @@ function classDirective(name, selector) {
        .red {
            color: red;
        }
+       .orange {
+           color: orange;
+       }
      </file>
      <file name="protractor.js" type="protractor">
        var ps = element.all(by.css('p'));
@@ -205,11 +212,18 @@ function classDirective(name, selector) {
        });
 
        it('array example should have 3 classes', function() {
-         expect(ps.last().getAttribute('class')).toBe('');
+         expect(ps.get(2).getAttribute('class')).toBe('');
          element(by.model('style1')).sendKeys('bold');
          element(by.model('style2')).sendKeys('strike');
          element(by.model('style3')).sendKeys('red');
-         expect(ps.last().getAttribute('class')).toBe('bold strike red');
+         expect(ps.get(2).getAttribute('class')).toBe('bold strike red');
+       });
+
+       it('array with map example should have 2 classes', function() {
+         expect(ps.last().getAttribute('class')).toBe('');
+         element(by.model('style4')).sendKeys('bold');
+         element(by.model('warning')).click();
+         expect(ps.last().getAttribute('class')).toBe('bold orange');
        });
      </file>
    </example>