控制器内单页切换

Question

控制器内单页切换

Wscats opened this issue 8 years ago · comments

关键点在于ng-if的运用，利用布尔值判断页面是否显示，页面可以用ng-include包含外部页面，也可以一个页面内把两个切换页写完

然后可以用ng-class来切换样式
ng-class="{'blue':isOne}"
上面这句的意思是如果$scope.isOne = true;isOne为真的时候添加该样式，如果为假去除该样式

<!DOCTYPE html>
<html ng-app="wsscat">

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="angular.js"></script>

    <body ng-controller="homeCtrl">
        <button ng-click="toggle()">切换</button>
        <article>
            <section ng-click="show(1)" ng-class="{'blue':isOne}">左</section>
            <section ng-click="show(2)" ng-class="{'blue':isTwo}">右</section>
        </article>
        <div ng-if="tap.page1">第一页</div>
        <div ng-if="tap.page2">第二页</div>
    </body>
    <script>
        var app = angular.module('wsscat', []);
        app.controller('homeCtrl', ['$scope', function($scope) {
            $scope.name = 'yao';
            $scope.tap = {
                page1: true,
                page2: false
            }
            $scope.toggle = function() {
                //取反
                $scope.tap.page1 = !$scope.tap.page1;
                $scope.tap.page2 = !$scope.tap.page2;
            }
            $scope.lineBorder = true;
            $scope.show = function(page) {
                if(page==1){
                    //样式切换
                    $scope.isOne = true;
                    $scope.isTwo = false;
                    //页面切换
                    $scope.tap.page1 = true;
                    $scope.tap.page2 = false;
                }else{
                    $scope.isOne = false;
                    $scope.isTwo = true;
                    $scope.tap.page1 = false;
                    $scope.tap.page2 = true;
                }
            }
        }])
    </script>
    <style>
        article {
            display: flex;
        }

        article section {
            text-align: center;
            background-color: aquamarine;
            flex: 1;
        }
        /*下划线颜色*/

        .blue {
            color: #0c63ee;
            border-bottom: 2px solid #0c63ee;
        }
    </style>

</html>

下面这句取反来实现切换效果

$scope.toggle = function() {
                //取反
                $scope.tap.page1 = !$scope.tap.page1;
                $scope.tap.page2 = !$scope.tap.page2;
            }