Question

在我的应用程序中，我有一个条件ng-class

 INDEX.HTML
 <div class="card-panel" ng-click="update(1)" ng-class="selectedPromotion == 1 ? 'blue accent-3' : ''">
     Cas 1
 </div>
 <div class="card-panel" ng-click="update(2)" ng-class="selectedPromotion == 2 ? 'blue accent-3' : ''">
     Cas 2
 </div>
 <div class="card-panel" ng-click="update(3)" ng-class="selectedPromotion == 3 ? 'blue accent-3' : ''">
     Cas 3
  </div>

方法更新设置了var选择

$scope.update = function(index){
    panierService.setChoice(index);
};

我的控制器中的方法：

$scope.selectedPromotion =  panierService.getChoice();

但是当我点击不同的Div时，var被正确设置但是ng-class保留在选择1上，该方法不适用于应用css样式

有任何解决方案吗？

感谢您的帮助

Answer 1

您必须在更改时更新变量：

$scope.update = function(index){
    panierService.setChoice(index);
    $scope.selectedPromotion = index; //panierService.getChoice();
};

Answer 2

这里的问题是因为$scope.selectedPromotion对服务的值（panierService.getChoice()）没有相同的引用，因为它们是数字而不是对象，也可能是panierService.setChoice方法更改引用（如果它是一个对象）。您可以将$scope.selectedPromotion从数字更改为返回panierService.getChoice的函数。此外，您可以将此变量重命名为$scope.getSelectedPromotion。

 <div class="card-panel" ng-click="update(1)" ng-class="getSelectedPromotion() == 1 ? 'blue accent-3' : ''">
     Cas 1
 </div>

 <div class="card-panel" ng-click="update(2)" ng-class="getSelectedPromotion() == 2 ? 'blue accent-3' : ''">
     Cas 2
 </div>
 <div class="card-panel" ng-click="update(3)" ng-class="getSelectedPromotion() == 3 ? 'blue accent-3' : ''">
     Cas 3
 </div>

在控制器中你可以做到

$scope.getSelectedPromotion = function () {
   return panierService.getChoice();
};

你可以像你一样离开的方法$scope.update。

具有变化的变量的角度ng-class

2 个答案: