Question

当我想点击UL扩展以下级别的每个级别时，其余部分。

Html代码：

<div class="main" ng-app="myApp" ng-controller="exampleCtrl"> <div ng-repeat="(key, value) in data"> <div show-hide value="value" show="isShow" chang = "changShow()"></div> </div> </div>

指令代码：

    var myApp = angular.module("myApp",[]); 
    myApp.directive('showHide', [function () {
        return {
            restrict: 'A',
            scope:{
                value:"=",
                show:"=",
                chang:"&"
            },
            template:'<h5>{{value.title}}</h5>\
            <ul ng-show="show">\
                <li ng-repeat="contentValue in value.content" >\
                    {{contentValue}}\
                </li> </ul>',
            link: function (scope, iElement, iAttrs) {
                iElement.find("h5").on("click", function (){
                    scope.$apply(function (){
                        scope.show = !scope.show;
                    });
                });
            }
        };
    }]);

控制器代码：

    myApp.controller('exampleCtrl', ['$scope',"$http", function ($scope,$http) {
        $scope.data = {
        "1":{
            "title":"第一级",
            "content":[
                    "1111",
                    "2222222",
                    "33333333333"
                ]

        },
        "2":{
            "title":"第二级",
            "content":[
                    "1111",
                    "2222222",
                    "33333333333",
                    "44444444444444444444444444"
                ]

        },
        "3":{
            "title":"第三级",
            "content":[
                    "1111",
                    "2222222",
                    "33333333333",
                    "44444444444444444444444444",
                    "5555555555555555555555555555555555555555555555555555"
                ]

        }
    };

        $scope.isShow = false;
        $scope.changShow  = function (){
            $scope.isShow = false;  
        };
    }]);`

查看地址：http://jsfiddle.net/booleans/24FVt/

帮助我！谢谢！

Answer 1

您可以使用angular-ui accordion

<accordion close-others="oneAtATime">
    <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      This content is straight in the template.
    </accordion-group>
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </accordion-group>
    <accordion-group heading="Dynamic Body Content">
      <p>The body of the accordion group grows to fit the contents</p>
        <button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
        <div ng-repeat="item in items">{{item}}</div>
    </accordion-group>
    <accordion-group is-open="status.open">
        <accordion-heading>
            I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
        </accordion-heading>
        This is just some content to illustrate fancy headings.
    </accordion-group>
  </accordion>

关于angularjs指令示例

1 个答案: