css - 在 ng-repeat 中的选定 div 上应用 Ionic 中的 CSS 类

Question

<ion-slide ng-repeat="category in uniqueCategories" ng-if="$index % 4 === 0">
    <div class="row" id="rowInSlider">
        <div class="col col-25" ng-if="$index < uniqueCategories.length" ng-click="CategorySelected(uniqueCategories[$index], $index)">
            <span class="img-centered img-padding imageDiv button button-icon">
                <img  class="smaller" src="img/south-indian-category-thumb.png">
             </span>
            <p class="smaller">{{uniqueCategories[$index]}}</p>
        </div>
        <div class="col col-25" ng-if="$index+1 < uniqueCategories.length" ng-click="CategorySelected(uniqueCategories[$index+1])">
            <div class="img-centered img-padding imageDiv button button-icon">
                <img class="smaller" src="img/south-indian-category-thumb.png">
            </div>
            <p class="smaller">{{uniqueCategories[$index+1]}}</p>
        </div>
</ion-slide>

如何为选中的 div 设置背景颜色？

这是我尝试过的:

<div class="col col-25" ng-if="$index < uniqueCategories.length" ng-click="CategorySelected(uniqueCategories[$index], $index)" ng-class="{selectedCategory: selectedCategory[$index]" >

Controller :

$scope.CategorySelected=function(categoryName, indexNumber){
  console.log(indexNumber)
$rootScope.readyToRender=false;
var selectedCategory={}
selectedCategory[indexNumber]=true;
}

但它不起作用，我没有得到背景颜色。

Answer 1

你写道:

ng-class="{selectedCategory: selectedCategory[$index]"

首先，缺少大括号，但还有另一个问题:您必须在 $scope 上公开 selectedCategory:

$scope.CategorySelected = function (indexNumber){
    $scope.selectedCategory = {};
    $scope.selectedCategory[indexNumber] = true;
}

然后:

ng-class="{selectedCategory: selectedCategory[$index]}"

---

就是说，您想要在此处实现的目标可能通过向类别对象添加标志 isSelected 来更好地完成。