Angular——tab切换案例

基本介绍

angular框架下的tab切换，相比较于之前的纯js写的代码，有一个很大的特点就是以数据为驱动，基本上不用搜索dom元素就可以实现效果

基本使用

（1）导航部分使用的是的状态使用的是ng-class，只有当参数是true时，才会显示current这个类，每个li标签也绑定了一个事件可以控制type的取值

（2）主体部分使用的ng-switch，当type值发生改变才会显示对应的li标签

<!DOCTYPE html >
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .clearfix:after {
            content: '';
            visibility: hidden;
            display: block;
            clear: both;
        }

        div {
            margin: 120px auto;
            width: 400px;
        }

        .tab {
            list-style: none;
            background-color: pink;
        }

        .tab li {
            float: left;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            position: relative;
        }

        .tab li:after {
            content: '';
            position: absolute;
            height: 20px;
            border-right: 1px solid black;
            top: 5px;
            right: 0px;
        }

        .tab li:last-child:after {
            visibility: hidden;
        }

        .tab li.current {
            background-color: #ccc;
        }

        .main {
            list-style: none;
            height: 398px;
            border: 1px solid #000;
        }

        .main li {
            width: 400px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 34px;
            position: relative;
            /*display: none;*/
        }

        /*.main li.current {*/
        /*display: block;*/
        /*}*/
    </style>
    <script src="../libs/angular.min.js"></script>
</head>
<body>
<div ng-controller="DemoController">
    <ul class="tab clearfix">
        <li ng-click="switch(1)" ng-class="{current:type==1}">1</li>
        <li ng-click="switch(2)" ng-class="{current:type==2}">2</li>
        <li ng-click="switch(3)" ng-class="{current:type==3}">3</li>
        <li ng-click="switch(4)" ng-class="{current:type==4}">4</li>
    </ul>
    <ul class="main" ng-switch="type">
        <li ng-switch-when="1">1</li>
        <li ng-switch-when="2">2</li>
        <li ng-switch-when="3">3</li>
        <li ng-switch-when="4">4</li>
    </ul>
</div>
<script>
    var App = angular.module('App', []);
    App.controller('DemoController', ['$scope', function ($scope) {
        $scope.type = '1';
        $scope.switch = function (value) {
            $scope.type = value;
        }
    }]);
</script>
</body>
</html>

 

posted @ 2018-02-03 19:33  var_obj  阅读(327)  评论(0)  编辑  收藏  举报