以编程方式在 ng-repeat元素上切换类

Programmatically toggle class on ng-repeat element

本文关键字：元素 ng-repeat 编程 方式      更新时间：2023-09-26

我想以编程方式在单个ng-repeat元素上切换类，但我的代码似乎将其设置为所有元素，并且无法重置它。我该如何解决这个问题？

瞬间.html 

<div class="item item-button-right" ng-repeat="service in businessServiceList | filter:services">
  {{service.title}}
  <div class="buttons" style="padding: 0px">
    <button class="button {{buttonStyle}}" ng-click="changeButtonStyle()">
      <i class="ion-android-done"></i>
    </button>
    <button class="button button-stable">
      <i class="ion-android-more-horizontal"></i>
    </button>
  </div>
</div>

控制器.js

.controller('BookCtrl', function($scope, ServicesData, $stateParams) {
  $scope.businessServiceList = ServicesData.getBusinessServiceList ($stateParams.business);
  $scope.buttonStyle="button-stable";
  $scope.changeButtonStyle = function(){
    $scope.buttonStyle="button-positive";
  }
})

ng-class，你必须使用！

<div class="item item-button-right" ng-repeat="service in businessServiceList | filter:services">
  {{service.title}}
  <div class="buttons" style="padding: 0px">
    <button class="button" 
        ng-class="{ 'button-positive': isButtonClicked }" ng-click="isButtonClicked = !isButtonClicked">
      <i class="ion-android-done"></i>
    </button>
    <button class="button button-stable">
      <i class="ion-android-more-horizontal"></i>
    </button>
  </div>
</div>

因此，在 ng-class 属性中，您可以只放置所有应该由特定条件切换的类。

相关文章：