我试图根据数组中是否存在对象来设置类。类似的东西:
<button ng-repeat="item in items"
ng-click="addItem(item)"
ng-class="{'selected': selectedFilter(item)}">{{item.name}}</button>
$scope.items = [
{name: 'apple', prop: 1},
{name: 'banana', prop: 2},
{name: 'orange', prop: 3}
];
$scope.selectedItems = [
{name: 'apple', prop: 1}
];
$scope.addItem = function(item){
$scope.selectedItems.push(item);
};
$scope.selectedFilter = function(item){
$scope.selectedItems.forEach(function(selectedItem){
return selectedItem.name===item.name
});
};
这个想法是,当点击一个按钮并选择一个项目时,我认为该类将被应用并且颜色应该变为灰色。然而,什么也没发生。没有错误。
答案 0 :(得分:0)
试试这个:
<button ng-repeat="item in items"
ng-click="addItem(item)"
ng-class="{'selected': item.name == selectedItemName }">
{{item.name}}
</button>
用这个
$scope.addItem = function (item) {
$scope.selectedItems.push(item);
$scope.selectedItemName = item.name;
};
$scope.selectedItemName = 'apple';
你可以摆脱这个功能:
$scope.selectedFilter = function(item){
$scope.selectedItems.forEach(function(selectedItem){
return selectedItem.name===item.name
});
答案 1 :(得分:0)
在这种情况下,您需要使用Array.prototype.find
。 return
的{{1}}值始终为Array.prototype.forEach
。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
undefined
答案 2 :(得分:0)
Here is a sample fiddle显示了如何在选中时设置项目的CSS。为了使其完整,我还添加了一个代码,该代码将在再次单击时从选择列表中删除这些项目。
此代码最初会将$scope.items
中的元素标记为IsSelected = true
,并在点击发生时更新每个项目的选择状态。我已经使用了所选项目的颜色绿色(希望你不要介意)。
function markSelectedItems() {
$scope.items.forEach(function(item) {
$scope.selectedItems.forEach(function(selectedItem) {
return selectedItem.name === item.name ? item.IsSelected = true : false;
});
});
}
$scope.addItem = function(item) {
if (!item.IsSelected) {
$scope.selectedItems.push(item);
item.IsSelected = true;
} else {
var indexToRemove = -1;
var count = $scope.selectedItems.length;
//removes the first match
for (var i = 0; i < count; i++) {
if ($scope.selectedItems[i].name === item.name) {
$scope.selectedItems.splice(indexToRemove, 1);
break;
}
}
item.IsSelected = false;
}
};