时间戳

首页 > 解决方案 > 我的 div 面板在 ng-click 上无法正常工作

angularjs - 我的 div 面板在 ng-click 上无法正常工作

问题描述

我不知道我的代码有什么问题，也没有在控制台中看到任何错误。我的 div 面板无法正常工作。我有 ng-click，当我单击时，我正在显示一个 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);
      }
    ]);
})();

标签： angularjs

解决方案

给你，工作代码：

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

我还添加了引导箭头。

推荐阅读