angular ng-class not working as expected

Question

I have set up my ng-class like this:

<ul class="picker-dropdown list-inline form-control">
    <li ng-repeat="colour in controller.colours.data" ng-class="{'active': controller.team.data.colours.indexOf(colour) > -1}">
        <a href style="background-color: #{{ colour.hex }};" ng-click="controller.setColour(colour)"></a>
    </li>
</ul>

and my team looks like this:

{
    loading: false,
    data: {
        id: 0,
        name: 'Test',
        sport: '',
        colours: [{
            id: 31,
            name: 'Hot Pink (Pms Magenta)',
            hex: 'd40082'
        },{
            id: 32,
            name: 'Baby Pink (196u)',
            hex: 'ffc2cc'
        },{
            id: 33,
            name: 'Cream',
            hex: 'ffffe5'
        }]
    }
};

Now, I expect that the active class will be added to the three colours in my repeat. controller.colours.data looks like this:

[
    {
        "hex": "000000",
        "id": 1,
        "name": "Black"
    },
    {
        "hex": "ffffff",
        "id": 2,
        "name": "White"
    },
    {
        "hex": "001444",
        "id": 3,
        "name": "School Navy Blue"
    },
    {
        "hex": "000e31",
        "id": 4,
        "name": "Sport Navy Blue Pms 532"
    },
    {
        "hex": "003072",
        "id": 5,
        "name": "Royal Blue (Pms286)"
    },
    {
        "hex": "83cce4",
        "id": 6,
        "name": "Pale Blue (Pms292)"
    },
    {
        "hex": "051667",
        "id": 7,
        "name": "Reflex Blue (Pms Ref Blu)"
    },
    {
        "hex": "0080bc",
        "id": 8,
        "name": "Cyan Blue (Process Cyan)"
    },
    {
        "hex": "004066",
        "id": 9,
        "name": "Petrol Blue (Pms3035)"
    },
    {
        "hex": "ff0000",
        "id": 10,
        "name": "Red (Pms200)"
    },
    {
        "hex": "a50021",
        "id": 11,
        "name": "Cranberry (Pms209)"
    },
    {
        "hex": "990033",
        "id": 12,
        "name": "Maroon (Pms202)"
    },
    {
        "hex": "990000",
        "id": 13,
        "name": "Burgundy (Pms195)"
    },
    {
        "hex": "003300",
        "id": 14,
        "name": "School Bottle Green"
    },
    {
        "hex": "1d4012",
        "id": 15,
        "name": "Sport Bottle Green (Pms350)"
    },
    {
        "hex": "12872b",
        "id": 16,
        "name": "Emerald Green (Pms347u)"
    },
    {
        "hex": "336648",
        "id": 17,
        "name": "Sage Green (Pms5545)"
    },
    {
        "hex": "089770",
        "id": 18,
        "name": "Leaf Green (Pms569)"
    },
    {
        "hex": "e26b0a",
        "id": 19,
        "name": "Orange (Pms021)"
    },
    {
        "hex": "ffc000",
        "id": 20,
        "name": "Gold (Pms1375)"
    },
    {
        "hex": "ffff00",
        "id": 21,
        "name": "Sunshine (Pms1225c)"
    },
    {
        "hex": "ffff66",
        "id": 22,
        "name": "Sunburst Pms115c)"
    },
    {
        "hex": "a6a6a6",
        "id": 23,
        "name": "Grey (Pms Cool Grey 6c)"
    },
    {
        "hex": "404040",
        "id": 24,
        "name": "Charcoal Pms432)"
    },
    {
        "hex": "7030a0",
        "id": 25,
        "name": "Purple (Pms2613)"
    },
    {
        "hex": "d40082",
        "id": 26,
        "name": "Hot Pink (Pms Magenta)"
    },
    {
        "hex": "ffc2cc",
        "id": 27,
        "name": "Baby Pink (196u)"
    },
    {
        "hex": "ffffe5",
        "id": 28,
        "name": "Cream"
    },
    {
        "hex": "704626",
        "id": 29,
        "name": "Brown (Pms731)"
    },
    {
        "hex": "351f16",
        "id": 30,
        "name": "Chocolate (Pms476)"
    },
    {
        "hex": "d40082",
        "id": 31,
        "name": "Hot Pink (Pms Magenta)"
    },
    {
        "hex": "ffc2cc",
        "id": 32,
        "name": "Baby Pink (196u)"
    },
    {
        "hex": "ffffe5",
        "id": 33,
        "name": "Cream"
    },
    {
        "hex": "ff0000",
        "id": 34,
        "name": "Red (Pms200)"
    },
    {
        "hex": "a50021",
        "id": 35,
        "name": "Cranberry (Pms209)"
    },
    {
        "hex": "990033",
        "id": 36,
        "name": "Maroon (Pms202)"
    }
]

Does anyone know why this isn't working?

I had faced this issue. At that time i have done some workaround like this <div ng-init="flag=applyClass();" ng-class="{'active':flag}>ABCD</div> where applyClass() is a method which return true or false depending on the condition. — Anita
– Anita, Commented Apr 10, 2015 at 12:43

Shomz · Accepted Answer · 2015-04-10 13:17:17Z

You have a few issues in your code.

This:

ng-repeat="colour in controller.colours.data"

produces the colour variable on each iteration, and it looks like:

{
    "hex": "000000",
    "id": 1,
    "name": "Black"
}

So, it's an object.

Because of that, you can't do:

controller.team.data.colours.indexOf(colour)

because in JS, two objects with identical properties are not considered the same objects. That works only with primitives.

I understand you want to match each object's id, and probably the easiest way to do it is to have a temporary array containing only the ids of the colours, like this:

team.data.tmp = [31, 32, 33];

and then simply do:

controller.team.data.tmp.indexOf(colour.id) !== -1

Working example

See it in action here, note that the active ones have triple the width of the standard ones:

angular.module('app', [])
  .controller('Ctrl', function($scope) {
    $scope.controller = {};
    $scope.controller.team = {
      loading: false,
      data: {
        id: 0,
        name: 'Test',
        sport: '',
        colours: [{
          id: 31,
          name: 'Hot Pink (Pms Magenta)',
          hex: 'd40082'
        }, {
          id: 32,
          name: 'Baby Pink (196u)',
          hex: 'ffc2cc'
        }, {
          id: 33,
          name: 'Cream',
          hex: 'ffffe5'
        }],
        tmp: [31, 32, 33]
      }
    };
    $scope.controller.colours = {};
    $scope.controller.colours.data = [{
      "hex": "000000",
      "id": 1,
      "name": "Black"
    }, {
      "hex": "ffffff",
      "id": 2,
      "name": "White"
    }, {
      "hex": "001444",
      "id": 3,
      "name": "School Navy Blue"
    }, {
      "hex": "000e31",
      "id": 4,
      "name": "Sport Navy Blue Pms 532"
    }, {
      "hex": "003072",
      "id": 5,
      "name": "Royal Blue (Pms286)"
    }, {
      "hex": "83cce4",
      "id": 6,
      "name": "Pale Blue (Pms292)"
    }, {
      "hex": "051667",
      "id": 7,
      "name": "Reflex Blue (Pms Ref Blu)"
    }, {
      "hex": "0080bc",
      "id": 8,
      "name": "Cyan Blue (Process Cyan)"
    }, {
      "hex": "004066",
      "id": 9,
      "name": "Petrol Blue (Pms3035)"
    }, {
      "hex": "ff0000",
      "id": 10,
      "name": "Red (Pms200)"
    }, {
      "hex": "a50021",
      "id": 11,
      "name": "Cranberry (Pms209)"
    }, {
      "hex": "990033",
      "id": 12,
      "name": "Maroon (Pms202)"
    }, {
      "hex": "990000",
      "id": 13,
      "name": "Burgundy (Pms195)"
    }, {
      "hex": "003300",
      "id": 14,
      "name": "School Bottle Green"
    }, {
      "hex": "1d4012",
      "id": 15,
      "name": "Sport Bottle Green (Pms350)"
    }, {
      "hex": "12872b",
      "id": 16,
      "name": "Emerald Green (Pms347u)"
    }, {
      "hex": "336648",
      "id": 17,
      "name": "Sage Green (Pms5545)"
    }, {
      "hex": "089770",
      "id": 18,
      "name": "Leaf Green (Pms569)"
    }, {
      "hex": "e26b0a",
      "id": 19,
      "name": "Orange (Pms021)"
    }, {
      "hex": "ffc000",
      "id": 20,
      "name": "Gold (Pms1375)"
    }, {
      "hex": "ffff00",
      "id": 21,
      "name": "Sunshine (Pms1225c)"
    }, {
      "hex": "ffff66",
      "id": 22,
      "name": "Sunburst Pms115c)"
    }, {
      "hex": "a6a6a6",
      "id": 23,
      "name": "Grey (Pms Cool Grey 6c)"
    }, {
      "hex": "404040",
      "id": 24,
      "name": "Charcoal Pms432)"
    }, {
      "hex": "7030a0",
      "id": 25,
      "name": "Purple (Pms2613)"
    }, {
      "hex": "d40082",
      "id": 26,
      "name": "Hot Pink (Pms Magenta)"
    }, {
      "hex": "ffc2cc",
      "id": 27,
      "name": "Baby Pink (196u)"
    }, {
      "hex": "ffffe5",
      "id": 28,
      "name": "Cream"
    }, {
      "hex": "704626",
      "id": 29,
      "name": "Brown (Pms731)"
    }, {
      "hex": "351f16",
      "id": 30,
      "name": "Chocolate (Pms476)"
    }, {
      "hex": "d40082",
      "id": 31,
      "name": "Hot Pink (Pms Magenta)"
    }, {
      "hex": "ffc2cc",
      "id": 32,
      "name": "Baby Pink (196u)"
    }, {
      "hex": "ffffe5",
      "id": 33,
      "name": "Cream"
    }, {
      "hex": "ff0000",
      "id": 34,
      "name": "Red (Pms200)"
    }, {
      "hex": "a50021",
      "id": 35,
      "name": "Cranberry (Pms209)"
    }, {
      "hex": "990033",
      "id": 36,
      "name": "Maroon (Pms202)"
    }]
  });

li a {
  width: 50px;
  height: 10px;
  display: inline-block;
  border: 1px solid black;
}
li.active a {
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="app" ng-controller="Ctrl" class="picker-dropdown list-inline form-control">
  <li ng-repeat="colour in controller.colours.data" ng-class="{'active': controller.team.data.tmp.indexOf(colour.id) > -1}">
    <a href style="background-color: #{{ colour.hex }};" ng-click="controller.setColour(colour)"></a>
  </li>
</ul>

Custom match function

If you don't wish to tamper with the original objects, you can make your own colour compare function and use it instead, for example:

$scope.matchColours = function(colourList, targetCol) {
  for(var i = 0; i < colourList.length; i++) {
      if (colourList[i].id === targetCol.id) {
          return true; // colour match found
      }
  }
  return false;
}

And then your ng-class could look something like this:

ng-class="{'active': matchColours(controller.team.data.colours, colour)}"

See it in action:

angular.module('app', [])
  .controller('Ctrl', function($scope) {
  
    $scope.matchColours = function(colourList, targetCol) {
      for (var i = 0; i < colourList.length; i++) {
        if (colourList[i].id === targetCol.id) {
          return true; // colour match found
        }
      }
      return false;
    }


    $scope.controller = {};
    $scope.controller.team = {
      loading: false,
      data: {
        id: 0,
        name: 'Test',
        sport: '',
        colours: [{
          id: 31,
          name: 'Hot Pink (Pms Magenta)',
          hex: 'd40082'
        }, {
          id: 32,
          name: 'Baby Pink (196u)',
          hex: 'ffc2cc'
        }, {
          id: 33,
          name: 'Cream',
          hex: 'ffffe5'
        }]
      }
    };
    $scope.controller.colours = {};
    $scope.controller.colours.data = [{
      "hex": "000000",
      "id": 1,
      "name": "Black"
    }, {
      "hex": "ffffff",
      "id": 2,
      "name": "White"
    }, {
      "hex": "001444",
      "id": 3,
      "name": "School Navy Blue"
    }, {
      "hex": "000e31",
      "id": 4,
      "name": "Sport Navy Blue Pms 532"
    }, {
      "hex": "003072",
      "id": 5,
      "name": "Royal Blue (Pms286)"
    }, {
      "hex": "83cce4",
      "id": 6,
      "name": "Pale Blue (Pms292)"
    }, {
      "hex": "051667",
      "id": 7,
      "name": "Reflex Blue (Pms Ref Blu)"
    }, {
      "hex": "0080bc",
      "id": 8,
      "name": "Cyan Blue (Process Cyan)"
    }, {
      "hex": "004066",
      "id": 9,
      "name": "Petrol Blue (Pms3035)"
    }, {
      "hex": "ff0000",
      "id": 10,
      "name": "Red (Pms200)"
    }, {
      "hex": "a50021",
      "id": 11,
      "name": "Cranberry (Pms209)"
    }, {
      "hex": "990033",
      "id": 12,
      "name": "Maroon (Pms202)"
    }, {
      "hex": "990000",
      "id": 13,
      "name": "Burgundy (Pms195)"
    }, {
      "hex": "003300",
      "id": 14,
      "name": "School Bottle Green"
    }, {
      "hex": "1d4012",
      "id": 15,
      "name": "Sport Bottle Green (Pms350)"
    }, {
      "hex": "12872b",
      "id": 16,
      "name": "Emerald Green (Pms347u)"
    }, {
      "hex": "336648",
      "id": 17,
      "name": "Sage Green (Pms5545)"
    }, {
      "hex": "089770",
      "id": 18,
      "name": "Leaf Green (Pms569)"
    }, {
      "hex": "e26b0a",
      "id": 19,
      "name": "Orange (Pms021)"
    }, {
      "hex": "ffc000",
      "id": 20,
      "name": "Gold (Pms1375)"
    }, {
      "hex": "ffff00",
      "id": 21,
      "name": "Sunshine (Pms1225c)"
    }, {
      "hex": "ffff66",
      "id": 22,
      "name": "Sunburst Pms115c)"
    }, {
      "hex": "a6a6a6",
      "id": 23,
      "name": "Grey (Pms Cool Grey 6c)"
    }, {
      "hex": "404040",
      "id": 24,
      "name": "Charcoal Pms432)"
    }, {
      "hex": "7030a0",
      "id": 25,
      "name": "Purple (Pms2613)"
    }, {
      "hex": "d40082",
      "id": 26,
      "name": "Hot Pink (Pms Magenta)"
    }, {
      "hex": "ffc2cc",
      "id": 27,
      "name": "Baby Pink (196u)"
    }, {
      "hex": "ffffe5",
      "id": 28,
      "name": "Cream"
    }, {
      "hex": "704626",
      "id": 29,
      "name": "Brown (Pms731)"
    }, {
      "hex": "351f16",
      "id": 30,
      "name": "Chocolate (Pms476)"
    }, {
      "hex": "d40082",
      "id": 31,
      "name": "Hot Pink (Pms Magenta)"
    }, {
      "hex": "ffc2cc",
      "id": 32,
      "name": "Baby Pink (196u)"
    }, {
      "hex": "ffffe5",
      "id": 33,
      "name": "Cream"
    }, {
      "hex": "ff0000",
      "id": 34,
      "name": "Red (Pms200)"
    }, {
      "hex": "a50021",
      "id": 35,
      "name": "Cranberry (Pms209)"
    }, {
      "hex": "990033",
      "id": 36,
      "name": "Maroon (Pms202)"
    }]
  });

li a {
  width: 50px;
  height: 10px;
  display: inline-block;
  border: 1px solid black;
}
li.active a {
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="app" ng-controller="Ctrl" class="picker-dropdown list-inline form-control">
  <li ng-repeat="colour in controller.colours.data" ng-class="{'active': matchColours(controller.team.data.colours, colour)}">
    <a href style="background-color: #{{ colour.hex }};" ng-click="controller.setColour(colour)"></a>
  </li>
</ul>

All right, forgot that javascript uses === for comparison. The problem is not with the use of objects though, the problem is the objects are not equal to each other.
Actually, the nature of JS objects is the problem - although they have exactly the same properties, they are not treated as the same objects in JS. And array indices are integers.
@Shomz the MatchColour method is what I will use. The reason for this is that both colours and team are pulled from the database, so I can't really edit the data (well I could, but I don't want to :)). Anyway, you posted a solution that will work so I have marked your answer.
Well, you could simply iterate the data in your controller, and create that tmp object - it doesn't even have to be under $scope.controller.team.data, but simply $scope.ids or something... so that way the original object would remain intact... with just a single line of code in a loop (I hardcoded it for snippet simplicity). Both solutions are fine to me, but choose whatever you like more. :) Ideally, your team data should contain only the id or the hex value, no need for the whole object.

Collectives™ on Stack Overflow

angular ng-class not working as expected

1 Answer 1

Working example

Custom match function

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Working example

Custom match function

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related