Мои панели div не работают должным образом при нажатии ng - PullRequest
0 голосов
/ 09 ноября 2018

Я не знаю, что не так с моим кодом, и я не вижу никаких ошибок в консоли. Мои панели 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);
      }
    ]);
})();

1 Ответ

0 голосов
/ 10 ноября 2018

Вот, пожалуйста, рабочий код:

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>

Плункер: http://plnkr.co/edit/CsMKy6ctHAgXg9O4gkob?p=preview

Я также добавил стрелки начальной загрузки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...