Angularjs 手风琴效果(组织架构)

来源：互联网发布：淘宝比价网编辑：程序博客网时间：2024/05/18 02:30

很多人都遇到过这个问题，怎样实现手风琴效果，bootstrap可以实现页面，但是数据交互又是个问题。于是乎Angularjs的指令很好的解决了这个问题，经过查资料整理，将结果放到这，希望大家多多指正。

1,HTML

<my-page ng-repeat="item in expanders" page-title="item.title">    <p>{{items.text}}</p> //或者写其他HTML片段</my-page>

2,JS

app.directive('myPage', function () {    return {        restrict: 'EA',        replace: true,        transclude: true,        scope: {            title: "=pageTitle"        },        template: [            '<div class="panel panel-info">',            '<div class="panel-heading" ng-click="toggle();">',            '<h3 class="panel-title" >{{title}}</h3>',            '</div>',            '<div class="panel-body" ng-show="showMe" ng-transclude></div>',            '</div>'        ].join(""),        link: function (scope, element, attrs) {            scope.showMe = false;            scope.$parent.addExpander(scope);            scope.toggle = function toggle() {                scope.showMe = !scope.showMe;                scope.$parent.goToExpander(scope);            }        }    };});app.controller('myCtrl', ['$scope','$http',function ($scope,$http) {    $scope.expanders = [{        title: '人力资源部',        text: '人力资源部'    }, {        title: '财务部',        text: '财务部'    }, {        title: '行政部',        text: '行政部'    }];    var expanders = []; //记录所有菜单    $scope.addExpander = function (expander) {        expanders.push(expander);    };    $scope.goToExpander = function (selectedExpander) {        expanders.forEach(function (item, index) {//隐藏非当前选项卡,实现切换功能            if (item != selectedExpander) {                item.showMe = false;            }        })    };}]);

3,效果图

阅读全文

0 0