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

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

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

然后：

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

那就是说，你想在这里实现的目标可能是通过在类别对象中添加一个标志isSelected来做得更好。

在ng-repeat中选择div中的Ionic中应用CSS类

1 个答案: