应用错误收集

Angularjs手风琴在我的项目中不起作用

时间：2018-07-11 18:18:47

标签： angularjs

我有一个angularjs手风琴，其数据来自json，但是在这里它可以正常工作，但是在我的项目中手风琴不起作用。还有其他方法可以做到这一点。下面是我的代码。我是angularjs的新手。

HTML

<script  src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
    <script src="app.js"></script>
    <style>
    .test1{
    background: #000;
    color: #fff;
    padding: 10px;
    }
    </style>
    </head> 
    <body>
    <div ng-app="plunker" ng-controller="MainCtrl">
        <div>
  <div>
    <div ng-repeat="test in items">
      <div class="test1" ng-click="handleClick(test)">
                {{test.title}}
      </div><br>
      <div class="test2"  ng-show="selectedItem==test"> {{test.location}}</div><br>
    </div>    
  </div>
</div>
</div>

app.js

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

  $scope.items = [
  {  
    "title": "firstitem",
    "location": "location1"
   },
  {    
    "title": "seconditem",
    "location": "location2"
   },
  {    
    "title": "thirditem",
    "location": "location3"
   }
];


$scope.handleClick = function (test) {
        $scope.selectedItem = test;
      }

});

1 个答案:

答案 0 :(得分：0)

var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
  $scope.oneAtATime = true;
  $scope.items = [
    {
      title: 'firstitem',
      location: 'location1'
    },
    {
      title: 'seconditem',
      location: 'location2'
    },
    {
      title: 'thirditem',
      location: 'location3'
    }
  ];
});

<html ng-app="plunker">
<head>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>   
<body >
<div  ng-controller="MainCtrl">  
  <uib-accordion close-others="oneAtATime">
    <uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
      {{test.location}}
    </uib-accordion-group>    
</div>
</body>
</html>

您可以使用以下方式轻松创建Angularjs手风琴。

HTML

<html ng-app="plunker">
<head>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>   
<body >
<div  ng-controller="MainCtrl">  
  <uib-accordion close-others="oneAtATime">
    <uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
      {{test.location}}
    </uib-accordion-group>    
</div>
</body>
</html>

app.js

var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
  $scope.oneAtATime = true;
  $scope.items = [
    {
      title: 'firstitem',
      location: 'location1'
    },
    {
      title: 'seconditem',
      location: 'location2'
    },
    {
      title: 'thirditem',
      location: 'location3'
    }
  ];
});

检查我的JSFiddle以获得更多说明。祝你好运！