手风琴-CSDN博客

本文链接：https://blog.csdn.net/yijinyiyjy/article/details/44838293

head部分：

 
        <link rel= 
        "stylesheet"  
        href= 
        "http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" 
        > 
       
 
        <script src= 
        "http://www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js" 
        ></script> 
       
 
        <script src= 
        "http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js" 
        ></script> 
       

html部分:

 
        </head> 
       
        <body ng-app= 
        "myApp"  
        style= 
        "background:#4A4A4A"  
        class= 
        "row" 
        > 
        //ng-app 是告诉angular， body里面的内容归他管 
       
        <div style= 
        "color:#fff; font-size:30px; font-weight:bold; text-shadow:3px 3px 3px #ccc;-webkit-text-shadow:3px 3px 3px #ccc; text-align:center; margin-top:30px;" 
        >FE-演示平台</div> 
       
        <section ng-controller= 
        "html5Demo"  
        class= 
        "col-md-6"  
        style= 
        "margin:50px auto; float:none" 
        >   
        //ng-controller angular的控制器在下面js要有对应的部分 
       
        <p> 
       
        <button class= 
        "btn btn-dufault btn-sm"  
        ng-click= 
        "status.open = !stasus.open"  
        style= 
        "margin-right:8px;" 
        >打开最后一个</button><button class= 
        "btn btn-sm"  
        ng-click= 
        "status.isDisabled = !status.isDisabled"  
        >禁止第一个</button> 
       
        </p>  
        //ng-click  顾名思义，angular的点击事件。 ！非运算符 
       
        <label  
        for 
        = 
        ""  
        class= 
        "checkbox"  
        style= 
        "color:#fff; padding-left:20px;" 
        > 
       
        <input type= 
        "checkbox"  
        ng-model= 
        "oneAtATime"  
        >   
        //ng-model  angular的一个叫oneAtATime模块 
       
        在同一时间只能打开一个 
       
        </label> 
       
        <accordion close-others= 
        "oneAtATime" 
        >   
        //关联着上面的ng-model  
       
        <accordion-group heading= 
        "www.html5jq.com---angular手风琴"  
        is-open= 
        "status.FirstOpen"  
        is-disabled= 
        "status.isDisabled" 
        >    
       
        </accordion-group> 
       
        <accordion-group heading= 
        "{{group.title}}"  
        ng-repeat= 
        "group in groups" 
        >    
        //ng-repeat  循环 。 
       
        {{group.content}} 
       
        </accordion-group>    
       
        <accordion-group heading= 
        "html5jq FE国内最好的学习平台" 
        > 
       
        <p>这里有最新的资源及实例</p> 
       
        <button class= 
        "btn btn-default btn-sm"  
        ng-click= 
        "addItem()" 
        >点击添加</button> 
       
        <section ng-repeat= 
        "item in items" 
        > 
       
        {{item}} 
       
        </section> 
       
        </accordion-group>    
       
        <accordion-group is-open= 
        "status.open" 
        > 
       
        <accordion-heading> 
       
        欢迎提出bug及建议已便于我们改进！<i class= 
        "pull-right glyphicon"  
        ng-class= 
        "{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}" 
        ></i> 
       
        </accordion-heading> 
       
        thanks 
       
        </accordion-group> 
       
        </accordion-group> 
       
        </section> 
       
        </body>

js部分：

 
        <script> 
       
        angular.module( 
        'myApp' 
        ,[ 
        'ui.bootstrap' 
        ]).controller( 
        'html5Demo' 
        ,  
        function  
        ($scope) { 
       
        $scope.oneAtATime =  
        true 
        ; 
       
        $scope.groups = [{ 
       
        title :  
        'one-1' 
        , 
       
        content :  
        'one-1-content' 
       
        },{ 
       
        title :  
        'one-2' 
        , 
       
        content :  
        'one-2-content' 
       
        }]; 
       
        $scope.items = [ 
        'Item 1' 
        ,  
        'Item 2' 
        ,  
        'Item 3' 
        ]; 
       
        $scope.addItem =  
        function 
        (){ 
       
        var  
        newItemNo = $scope.items.length + 1; 
       
        $scope.items.push( 
        'Item'  
        + newItemNo) 
       
        }     
       
        $scope.status = { 
       
        isFirstOpen:  
        true 
        , 
       
        isFirstDisabled :  
        false 
       
        } 
       
        }); 
       
        </script>