使用Angular Bootstrap手风琴将id添加到ng-template

时间:2017-01-18 23:45:31

标签: javascript angularjs angular-ui-bootstrap angular-ui

我在向标题模板添加动态ID时遇到问题。我试过包含一个id =“{{group.title}}”,但它不起作用。任何帮助或建议都会很棒!

    <div ng-controller="AccordionDemoCtrl">
      <uib-accordion close-others="oneAtATime">
        <div uib-accordion-group class="panel-default" template-url="group-template.html" ng-repeat="group in groups">
          <uib-accordion-heading>
            {{group.title}}
          </uib-accordion-heading>
          {{group.content}}
        </div>
      </uib-accordion>
    </div>

    <script type="text/ng-template" id="group-template.html">
        <div id="{{group.title}}" class="panel-heading" ng-click="toggleOpen()" uib-accordion-transclude="heading">
            <a href tabindex="0" class="accordion-toggle" >
              <span uib-accordion-header ng-class="{'text-muted': isDisabled}">
                <b>{{heading}}</b>
              </span>
            </a>
        </div>
        <div class="panel-collapse collapse" uib-collapse="!isOpen">
          <div class="panel-body" style="text-align: left" ng-transclude></div>
        </div>
      </script>

以下是plunkr:https://plnkr.co/edit/WbDY1S?p=preview

1 个答案:

答案 0 :(得分:1)

由于模板内部的范围不同,因此无法在该上下文中使用group

group将在父作用域中提供,因此您可以使用{{$parent.group.title}}

https://plnkr.co/edit/f7fHKohu7StKB4wJLeTv?p=preview