angular 의 ng - repat 와 ng - show 로 tab 옵션 을 실현 합 니 다.

18955 단어
비록 우 리 는 angular 의 경로 로 tab 옵션 을 만 들 수 있 지만, 그것 은 우리 로 하여 금 많은 페이지 를 만들어 서 도입 하거나 내용 을 담 을 수 있 게 할 것 이다. < br / > 나 는 모두 비교적 번거롭다 고 생각한다.그래서 저 는 angular 의 json 과 angular 의 ng - show 를 사용 하여 옵션 을 만 들 었 습 니 다. < /p>
< p > 는 말 이 많 지 않 습 니 다. 코드 를 올 립 니 다. < / p >
< p > html 부분 < / p >

    <ul>
        
        <li ng-repeat="v in wd" ng-click="wD($index)" class="{{wD1($index)?'wd':''}}">
            {{v.font}}
        li>
    ul>
    
    <ul ng-repeat="v in wd1" ng-show="wDBottom($index)">
        
        <li ng-repeat="vv in v.Font">
            {{vv.font}}
        li>
    ul>


< p > js 부분 < / p >
<script type="text/javascript">
        //angular  
        var app = angular.module("mk",[]);
        //angular   
        app.controller("ctrl",function($scope,$http){
            $scope.contentwd = 0;
            //    json nav  
            $scope.wd = [{"font":"1"},{"font":"2"},{"font":"3"},{"font":"4"},{"font":"5"}];
            //    json tab       
            $scope.wd1 = [
                {"Font":[
                    {"font":"tab1"},
                    {"font":"tab1"},
                    {"font":"tab1"}
                ]},
                {"Font":[
                    {"font":"tab2"},
                    {"font":"tab2"},
                    {"font":"tab2"}
                ]},
                {"Font":[
                    {"font":"tab3"},
                    {"font":"tab3"},
                    {"font":"tab3"}
                ]},
                {"Font":[
                    {"font":"tab4"},
                    {"font":"tab4"},
                    {"font":"tab4"}
                ]},
                {"Font":[
                    {"font":"tab5"},
                    {"font":"tab5"},
                    {"font":"tab5"}
                ]},
            ];
            //                  
            $scope.wD = function(index){
                $scope.contentwd = index;
                return $scope.contentwd;
            }
            //             
            $scope.wD1 = function(index){
                return $scope.contentwd == index;
            }
            //        tab         
            $scope.wDBottom = function(index){
                return $scope.contentwd == index;
            }
        })
    script>


< p > css 스타일 < / p >
<style type="text/css">
        /*     */
        *{margin:0;padding:0;text-decoration: none;box-sizing: border-box;list-style: none;}
        /*        */
        ul:first-child{
            width:500px;
            height:50px;
            margin:20px auto;
            margin-bottom: 0;
        }
        ul:first-child>li{
            width:100px;
            height:50px;
            border:1px solid #aaa;
            text-align: center;
            float: left;
            line-height: 50px;
        }
        ul:first-child~ul{
            width:500px;
            height:350px;
            margin:0px auto;
            border: 1px solid #aaa;
        }
        /* nav      */
        .wd{
            color:blue;
        }
    style>


< p > 나 는 이것 이 매우 편리 하 다 고 생각한다.도움 이 되 셨 으 면 좋 겠 습 니 다 < / p >

< p > 다음으로 옮 기기:https://www.cnblogs.com/Z-Xin/p/7227149.html





Node.js-MySQL-5
21.08.09 자료구조와 알고리즘

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage