javascript - 具有不断变化的 var 的 Angular ng 类

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

我的 Controller 中的方法:

$scope.selectedPromotion =  panierService.getChoice();

但是当我点击不同的 Div 时，var 设置正确但 ng-class 停留在选项 1 上，该方法不记得应用 css 样式

有什么解决办法吗？

谢谢你的帮助

Answer 1

这里的问题是因为 $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>

在 Controller 中你可以做

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

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