在angularjs中设置手风琴

时间:2018-11-12 09:08:30

标签: angularjs

[{"user_id":1,"name":"NOR","email":"boyz@XX.com", type: 'Company'},
{"user_id":2,"name":"Ress","email":"nr@xx.com", type: 'Dev'},
{"user_id":3,"name":"Cardd","email":"3b@xx.com", type: 'Dev'},
{"user_id":4,"name":"Robb","email":"4ec@xx.com", type: 'Dev'},
{"user_id":5,"name":"Bonn","email":"43ns@xx.com", type: 'QA Eng'}]


$scope.showContent=false;
      var lastActivePanelScope;
      $scope.showAccordianPanel =function(ev, itemScope){
        itemScope.showContent = !itemScope.showContent;

        if (lastActivePanelScope) {
          if (lastActivePanelScope !== itemScope) {
            lastActivePanelScope.showContent = false;
          }

        }

        if (itemScope.showContent) {
          lastActivePanelScope = itemScope;
        }
     } 

<div ng-repeat="(key, value) in myData | orderBy: 'type' | groupBy: 'type'">

                    <div class="list-group-title"><b>{{key}} Type(s)</b></div>
                     <button class="accordion" ng-class="showContent ? 'minus-icon': 'accordion-icon'" id="aac1" ng-click="showAccordianPanel($event, this)">{{accd}}</button>

            <div class="panel" ng-show="showContent">

                    <md-list-item class="md-2-line" ng-repeat="user in value">
                      <span  class="md-avatar"><i>{{ user.name.charAt(0).toUpperCase() }}</i></span>  
                      <div class="md-list-item-text">
                        <h3>{{user.name}}</h3>

                        <p>{{user.name}} ({{user.type}})</p>
                      </div>
                     </md-list-item>
                        <md-divider></md-divider>         
                    </div> 
             </div>

设置手风琴不起作用,我希望在其余四下显示第一个点击公司上的Type公司 如果我在某处做错了,请指导。非常感谢您的时间,谢谢

0 个答案:

没有答案