我已经设置了这样的ng-class：
<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>
我的团队看起来像这样：
{
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'
}]
}
};
现在，我希望活动类将添加到我重复的三种颜色中。 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)"
}
]
有谁知道为什么这不起作用？
答案 0 :(得分：1)
您的代码中存在一些问题。
这：
ng-repeat="colour in controller.colours.data"
在每次迭代时生成colour变量，它看起来像：
{
"hex": "000000",
"id": 1,
"name": "Black"
}
所以，它是一个对象。
因此，你无法做到：
controller.team.data.colours.indexOf(colour)
因为在JS中，具有相同属性的两个对象不被视为相同的对象。这只适用于原语。
我知道你想要匹配每个对象的id，最简单的方法就是拥有一个只包含id个颜色的临时数组，就像这样：
team.data.tmp = [31, 32, 33];
然后简单地做：
controller.team.data.tmp.indexOf(colour.id) !== -1
请参阅此处的操作，请注意，活动的宽度是标准宽度的三倍：
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>
如果您不想篡改原始对象，您可以制作自己的颜色比较功能并使用它，例如：
$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;
}
然后你的ng-class看起来像这样：
ng-class="{'active': matchColours(controller.team.data.colours, colour)}"
看到它的实际效果：
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>