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>

当我单击第2页的按钮时，我手动为page1和page3创建按钮，通过将page1和page3变量设置为false来切换类。

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

Answer 1

您可以在$ scope上创建两个方法，而不是定义多个变量，例如page1，page2，page3：

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

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

1 个答案: