css - 如何将多个 ng-click 与一个 bool 值一起使用？ AngularJS

Question

angularJS 很新，所以这个问题可能很愚蠢!我有 7 <span>包括一周的 7 天。这个想法是，每次用户点击某一天，多亏了 ng-show，一个包含当天一些数据的表格就会出现。

我对“按钮”有疑问(对于按钮，我指的是里面带有可点击文本的按钮)，我使用 ng-click 和 ng-class 所以当你点击某一天时，文本会变大并变色，这样您就知道您选择了哪一天!

ng-class="{'activeSelection': isActive}" ng-click="isActive = !isActive"


.activeSelection {
transform: scale(1.2);
color: #fff;

所以如果只有一天，这会很好用，但是当我点击某一天时，所有其他日子都会应用“activeSelection”类。

我知道发生这种情况是因为 BOOL isActive 它每天都是一样的，所以当我点击某一天并且它变为“真”时，所有的日子都变得相同所以所有的日子都变大并变色!

我该如何解决这个问题？最初我想为每一天制作一个不同的 BOOL，如下所示:

isActive, isActive2, isActive3, isActive4..

但是有一些问题，第一，当我已经点击了一天之后再点击另一天时，我希望前一天失去类(class)，所以一次只有一天很大!因此，如果点击新的一天，前一天会像其他日期一样返回小尺寸!

对于表格，我将使用一个 ng-show 和一个 bool 值，当点击一天时，我们会得到一个 bool 值，所以如果点击星期一，星期一的表格会显示，但如果我们点击星期三，星期一的表格就会消失，星期三出现。

最好的方法是什么？谢谢

Answer 1

您可以在每天点击时做一件事，将一些参数传递给函数并更新 $scope。试试下面的例子

<button ng-click="changeDay(1)"> Day 1</button>
<button ng-click="changeDay(2)"> Day 2</button>
<button ng-click="changeDay(3)"> Day 3</button>

<div ng-class="{'activeSelection': day==1}">1 Selection</div>
<div ng-class="{'activeSelection': day==2}">2 Selection</div>
<div ng-class="{'activeSelection': day==3}">3 Selection</div>

Controller

$scope.day =0;
$scope.changeDay = (day)=>{
    $scope.day =day;
}