角纳克级不按预期工作
角纳克级不按预期工作
提问于 2015-04-10 12:40:16
我已经安排好了这样的课程：
<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)"
}
]有人知道为什么这不管用吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-04-10 12:46:24
您的代码中有一些问题。
这是：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29561712
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号