Question

我正在尝试使用ng-repeat和jquery手风琴，只是遵循一些方法，但它根本不起作用：

我尝试使用更改CDN订单，但它不能正常工作......

（HTML）

<html>
<head>

<script   src="https://code.jquery.com/jquery-3.1.0.js"   integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="   

crossorigin="anonymous"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/angular.bootstrap/2.1.2/ui-bootstrap-tpls.min.js"></script>

<script type="text/javascript" src="angular.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

<title>Teste</title>
</head>

<body>
<div ng-app="ui.bootstrap.module" >
  <div ng-controller="ui.bootstrap.ctrl">


    <accordion close-others="true">

      <accordion-group ng-repeat="x in numOfMaps" 
                       heading="{{x.header}}" 
                       is-open="status.isFirstOpen" 
                       is-disabled="status.isFirstDisabled">
        {{x.text}}
      </accordion-group>

    </accordion>

  </div>
</div>
</body>
</html>

（JS）

var app = angular.module('ui.bootstrap.module', ['ui.bootstrap']);
app.controller('ui.bootstrap.ctrl', function ($scope) {

  $scope.numOfMaps = [ 
    {count: 1, text: "Text 1", header: "Header 1"},
    {count: 2, text: "Text 3", header: "Header 2"},
    {count: 2, text: "Text 3", header: "Header 3"}
  ];

});

（浏览器回答）

文字1文字3文字3

enter image description here

Answer 1

如果您使用的是angular-ui-bootstrap手风琴，则您的标签不正确。标记的这一部分应如下所示：

<uib-accordion close-others="true">

  <div uib-accordion-group ng-repeat="x in numOfMaps" 
                   heading="{{x.header}}" 
                   is-open="status.isFirstOpen" 
                   is-disabled="status.isFirstDisabled">
    {{x.text}}
  </div>

</uib-accordion>

更多信息： https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

AngularJs Jquery ng-repeat手风琴无效

1 个答案: