Question

我在访问以下代码时遇到问题，无法显示简单的Angular UI bootstrap手风琴

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <link href="bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <section id="">
        <div class="container">
         <div class="row" style="width:50%; margin:10% auto">

<div ng-controller="AccordionDemoCtrl" class="col-md-12">

  <p>
    <button class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
    <button class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
  </p>

  <label class="checkbox">
    <input type="checkbox" ng-model="oneAtATime">
    Open only one at a time
  </label>

  <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>


</div>

</div></div></section>


    <script src="angular2.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <script src="example.js"></script>


  </body>
</html>

1）Angular js版本：v1.2.16 //ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js

2）Bootstrap css版本：v3.1.1 //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

Example.js

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);


angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

          $scope.groups = [
            {
              title: 'Dynamic Group Header - 1',
              content: 'Dynamic Group Body - 1'
            },
            {
              title: 'Dynamic Group Header - 2',
              content: 'Dynamic Group Body - 2'
            }
          ];

  $scope.items = ['Item 1', 'Item 2', 'Item 3'];

  $scope.addItem = function() {
    var newItemNo = $scope.items.length + 1;
    $scope.items.push('Item ' + newItemNo);
  };


  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };
});

Screenshot while accessing the index file

请尽快告诉我..我该如何解决这个问题？我错过了什么？

Angular UI / Bootstrap Simple Accordion不显示

Example.js

0 个答案: