使用 ng-click 切换多个类和变量

Question

这是我第一次尝试使用 angular 进行分页链接。

<div ng-init="page1 = true" ng-show="page1"></div>
<div ng-show="page2"></div>
<div ng-show="page3"></div>

<div>
    <div class="btn-group" role="group">
        <button ng-click="page1 = true; page2 = false; page3 = false" ng-class="page1 ? 'btn btn-info' : 'btn btn-default'">1</button>
        <button ng-click="page2 = true; page1 = false; page3 = false" ng-class="page2 ? 'btn btn-info' : 'btn btn-default'">2</button>
        <button ng-click="page3 = true; page1 = false; page2 = false" ng-class="page3 ? 'btn btn-info' : 'btn btn-default'">3</button>
    </div>
</div>

当我单击 page2 的按钮时，我正在手动为 page1 和 page3 制作按钮，以通过将 page1 和 page3 vars 设置为 false 来切换类。

有没有办法在点击 page2 按钮时，让其他类似按钮动态切换类并将 vars 设置为 false 超出被点击元素的范围？

Answer 1

除了定义多个变量，例如 page1、page2、page3，您还可以在 $scope 上创建两个方法：

var active = 1; // Default active page
$scope.activate = function(page) {
    active = page;
}

$scope.isActive = function(page) {
    return page === active;
};

然后，您可以从您的模板中执行以下操作：

<div ng-show="isActive(1)"></div>
<div ng-show="isActive(2)"></div>
<div ng-show="isActive(3)"></div>

<div>
    <div class="btn-group" role="group">
        <button ng-click="activate(1)" ng-class="isActive(1) ? 'btn btn-info' : 'btn btn-default'">1</button>
        <button ng-click="activate(2)" ng-class="isActive(2) ? 'btn btn-info' : 'btn btn-default'">2</button>
        <button ng-click="activate(3)" ng-class="isActive(3) ? 'btn btn-info' : 'btn btn-default'">3</button>
    </div>
</div>

稍后您可能会在模板中执行类似的操作以使其更具动态性：

<div ng-repeat="page in pages" ng-show="isActive(page.index)"></div>

<div>
    <div class="btn-group" role="group">
        <button ng-repeat ng-click="activate(page.index)" ng-class="isActive(page.index) ? 'btn btn-info' : 'btn btn-default'">{{page.index}}</button>
    </div>
</div>

注意： 动态示例假设您的 $scope 上有一个类似于此的属性：

$scope.pages = [
    {index: 1},
    {index: 2},
    {index: 3}
];

您可以在此页面上找到有关 ngRepeat 的更多信息：https://docs.angularjs.org/api/ng/directive/ngRepeat