Question

我使用ng-repeat生成离子列表。在每个离子项中，有一个切换行为按钮，当点击和未打开时会改变颜色。然而，当我点击一个离子项中的按钮时，来自其他离子项的其他按钮也会被轻敲并改变它们的颜色。我该怎么办呢？

<ion-list id="listOfCandidates-list6">
  <ion-item ng-repeat="item in itemList" class="item-candidates alternaterow item-thumbnail-left" id="listOfCandidates-list-item8">
   <img src="img/tRk31wFSmS2hKHXnIAOZ_candidateicon.png">
   <br>
    <div class="col1">
    <h4>Name: {{item.name}}</h4><h4>Candidate No.: {{item.number}}</h4>
    </div>
    <div class="col2">
    <button class="button button-clear icon ion-star button-energized" ng-model="singleTog" ng-click="toggleButton(item.name)" ng-class="singleTog.clicked?'button-energized':'button-dark'" ></button>
    <button ng-click="goDetail(item.name,item.number)" class="button btn-small btn-primary">View</button>
    </div>
  </ion-item>
</ion-list>

这是我的controller.js代码：

$scope.favoriteList = []
$scope.singleTog = {}

$scope.toggleButton = function(candidateName)
{
 $scope.singleTog.clicked=!$scope.singleTog.clicked
 if($scope.singleTog.clicked==true)
 {
   if($scope.favoriteList.indexOf(candidateName) == -1) //does not exist in array
   {
    $scope.favoriteList.push(candidateName);
   }
 }
 else
 {
   if($scope.favoriteList.indexOf(candidateName) != -1) //exists in array
   {
     var index = $scope.favoriteList.indexOf(candidateName);
     $scope.favoriteList.splice(index, 1);   
   }
 }

 alert('favorites = ' + $scope.favoriteList);
}

Answer 1

将索引传递给您正在调用的函数以触发事件。

<button class="button button-clear icon ion-star button-energized" ng-model="singleTog" ng-click="toggleButton(item.name,$index)" ng-class="singleTog[$index] ?'button-energized':'button-dark'" ></button>
<button ng-click="goDetail(item.name,item.number)" class="button btn-small btn-primary">View</button>

并在您的控制器中

$scope.singleTog =[];

$scope.toggleButton = function(candidateName,index)
{
$scope.singleTog[index]=!$scope.singleTog[index];
 if($scope.singleTog[index])
 {
   if($scope.favoriteList.indexOf(candidateName) == -1) //does not exist in array
   {
    $scope.favoriteList.push(candidateName);
   }
 }
 else
 {
   if($scope.favoriteList.indexOf(candidateName) != -1) //exists in array
   {
     var index = $scope.favoriteList.indexOf(candidateName);
     $scope.favoriteList.splice(index, 1);   
   }
 }
alert('favorites = ' + $scope.favoriteList);

}

单击特定的离子项按钮会触发其他按钮

1 个答案: