我的div面板在ng点击时无法正常工作

Question

我不知道我的代码出了什么问题，在控制台中也没有看到任何错误。我的div面板工作不正常。我正在点击ng，当我点击时，我显示了一个div。右上角的箭头符号也不起作用。

上有我遗漏的东西吗

Html

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title"> <a data-toggle="collapse"  style="cursor:pointer" ng-click="ShowDefinition()"  aria-expanded="true" aria-controls="collapseOne">Definition</a> </h4>
</div>
<div id="collapseOne" ng-show="IsDefinitionVisible"  class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" style="cursor:pointer" ng-click="ShowValues()" aria-expanded="false" aria-controls="collapseTwo"> What We Do? </a> </h4>
</div>
<div id="collapseTwo" ng-show="IsValuesVisible" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" style="cursor:pointer" ng-click="ShowPrinciples()" aria-expanded="false" aria-controls="collapseThree"> Where We Do It?  </a> </h4>
</div>
<div id="collapseThree" ng-show="IsPrinciplesVisible" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. </div>
</div>
</div>

</div>

角度控制器

(function () {
var app = angular.module('myApp');
app.controller('aboutController', ['$scope',
function ($scope) {
$scope.TestAbout = "Test";

$scope.ShowDefinition = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsDefinitionVisible = $scope.IsDefinitionVisible ? false : true;
}
$scope.ShowValues = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsValuesVisible = $scope.IsValuesVisible ? false : true;
}
$scope.ShowPrinciples = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsPrinciplesVisible = $scope.IsPrinciplesVisible ? false : true;
}
console.log($scope.TestAbout);
}
]);
})();

Answer 1

开始，工作代码：

Html:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne"><i ng-if="!IsDefinitionVisible"  style="float:right" class="glyphicon glyphicon-arrow-down"></i><i ng-if="IsDefinitionVisible" style="float:right" class="glyphicon glyphicon-arrow-up"></i>
<h4 class="panel-title"> <a data-toggle="collapse"  style="cursor:pointer" ng-click="ShowDefinition()"  aria-expanded="true" aria-controls="collapseOne">Definition</a> </h4>
</div>
<div id="collapseOne" ng-show="IsDefinitionVisible"  class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo"><i ng-if="!IsValuesVisible" style="float:right" class="glyphicon glyphicon-arrow-down"></i><i ng-if="IsValuesVisible" style="float:right" class="glyphicon glyphicon-arrow-up"></i>
<h4 class="panel-title"> <a data-toggle="collapse"  style="cursor:pointer" ng-click="ShowValues()"  aria-expanded="true" aria-controls="collapseTwo">What We Do?</a> </h4>
</div>
<div id="collapseTwo" ng-show="IsValuesVisible"  class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.  </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree"><i ng-if="!IsPrinciplesVisible" style="float:right" class="glyphicon glyphicon-arrow-down"></i><i ng-if="IsPrinciplesVisible" style="float:right" class="glyphicon glyphicon-arrow-up"></i>
<h4 class="panel-title"> <a data-toggle="collapse"  style="cursor:pointer" ng-click="ShowPrinciples()"  aria-expanded="true" aria-controls="collapseThree">Where We Do It?</a> </h4>
</div>
<div id="collapseThree" ng-show="IsPrinciplesVisible"  class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.  </div>
</div>
</div>

</div>

Plunker：http://plnkr.co/edit/CsMKy6ctHAgXg9O4gkob?p=preview

我还添加了引导箭头。