如何在使用 AngularJS 对数据数组实现手风琴时默认打开第一行

Question

我需要一個幫助。我已经使用 Angular.js 在数据数组上实现了类似手风琴的功能.在这里，我需要先默认打开第一行。我在下面解释我的代码。

索引.html：

<div ng-controller="firstCotroller">
    <div class="panel-group accordion-content-div" id="accordion" style="width:100%; margin:0px auto;" >
      <div class="panel panel-default" ng-repeat="place in data">
        <div class="panel-heading active" role="tab" ng-click="manageCollapseExpand(place, false)">
          <a class="panel-title sky-blue-light" role="button" data-toggle="collapse" data-parent=""  aria-expanded="true">
              <i ng-class="{'glyphicon glyphicon-minus': place.expanded, 'glyphicon glyphicon-plus': !place.expanded }"></i> {{place.parentdes}} 
           </a>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
          <div class="panel-body" ng-show="place.expanded">

            <!-- inner accordion starts here -->
            <div class="panel-group accordion-content-div accordioninner"  style="margin:0 auto 10px auto;">
              <div class="panel panel-default" ng-repeat="cdes in place.childdes">
                <div class="panel-heading active panel-heading-sub-width" role="tab" style="border:1px solid #66afe9;" ng-click="manageCollapseExpand(cdes, true)">
                  <a class="collapsed panel-title sky-blue-light" role="button" data-toggle="collapse" data-parent="" aria-expanded="true" style="border-bottom:none;">
                      <i ng-class="{'glyphicon glyphicon-minus': cdes.expanded, 'glyphicon glyphicon-plus': !cdes.expanded }"></i>{{cdes.des}}                       
                  </a>
                </div>
                <div id="inner1collapsea-5-1" class="" ng-show="cdes.expanded">
                  <div class="panel-body padding0" style="border-top:none;" ng-repeat="cd in cdes.subchilddes">
                    <!-- inner inner accordion -->
                    <div class="panel-group accordion-content-div accordioninner accordioninner-inner">
                      <div class="panel panel-default" style="border:1px solid #66afe9;">
                        <div class="panel-heading">
                          <a class="panel-title sky-blue-light auditformpopup" role="button" ng-click="getAllNextPreviousIds(cd.sub_sub_id,$index,$parent.$index,$parent.$parent.$index)">
                          {{cd.des}}
                          </a>
                        </div>
                      </div>
                    </div>
                    <!-- inner inner accordion end -->
                  </div>
                </div>
              </div>
            </div>
            <!-- inner accordion end -->
          </div>
        </div>
      </div>
    </div>
  </div>

脚本.js：

var app = angular.module('app', []);
app.controller('firstCotroller',function($scope){
  $scope.data = [{
    "parentdes": "Parent description1",
    "parentid":"1",
    "childdes": [{
      "des": 'chile description11',
      "childid":"11",
      "subchilddes": [{
        "des": 'subchild des111',
        "sub_sub_id":"111"
      }]
    }, {
      "des": 'chile description12',
      "childid":"12",
      "subchilddes": [{
        "des": 'subchild des112',
        "sub_sub_id":"112"
      }]
    }]
  }, {
    "parentdes": "Parent description2",
    "parentid":"2",
    "childdes": [{
      "des": 'chile description21',
      "childid":"21",
      "subchilddes": [{
        "des": 'subchild des212',
        "sub_sub_id":"212"
      }]
    }, {
      "des": 'chile description22',
      "childid":"22",
      "subchilddes": [{
        "des": 'subchild des222',
        "sub_sub_id":"222"
      }]
    }]
  }];
  $scope.expandedParent = null;
  $scope.expandedChild = null;
  $scope.manageCollapseExpand = function(obj, isCity) {
    obj.expanded = !obj.expanded;
    if (obj !== $scope.expandedParent && obj !== $scope.expandedChild && obj.expanded) {
      $scope.collapseExpanded(isCity);
    }
    if (obj.expanded) {
      if (isCity) {
        $scope.expandedChild = obj;
      } else {
        $scope.expandedParent = obj;
      }
    }
  }
  $scope.collapseExpanded = function(clickedOnCity) {
    if (!clickedOnCity && $scope.expandedParent !== null) {
      $scope.expandedParent.expanded = false;
    }
    if ($scope.expandedChild !== null) {
      $scope.expandedChild.expanded = false;
    }
  }
})

默认情况下如何打开第一个数据数组，以便它按照现在的工作方式工作？这是我的完整 plunkr 代码。请帮我做到这一点。

Answer 1

以下是您的问题的快速解决方案：由于可见性逻辑围绕place.expanded属性，因此我们可以利用ng-init并调用为我们设置该特定属性的函数：

索引.html：

<div class="panel panel-default" ng-repeat="place in data"  ng-init="expandFirst(data)">
    //...
</div>

脚本.js：

$scope.expandFirst = function(array)
{
    //something like this
    array[0].expanded = true;
    $scope.expandedParent = array[0];
}

这是扑克