申請CSS類在離子選定的div在ng重複

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]" > 

控制器：

$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; 
} 

Then：

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

---

這就是說，你要在這裏實現了可能是通過增加一個標誌isSelected的類別對象做得更好。