CODEWITHSUNDEEP
angularjs
pyramidface
pyramidface

Reputation: 1277

AngularJS Ng-click only works only once or twice

Ng-click triggers the ng-show to be opposite of what it was before. When the ng-show is attached to the p tags in the first two items, it works fine. When the ng-show is attached to the ul, things start to get buggy. If it's the first click on the page, I can click the buggy trigger like one time, click something else... and it will stop working. What's going on here? Thanks.

(function(){
    var faqApp = angular.module('faqApp',[]);
    var faqController = function($scope){
        $scope.paid_info = false;
        $scope.schedule_info = false;
        $scope.qualifications_info = false;
        $scope.paid = function(){
            $scope.paid_info = !$scope.paid_info;
            $scope.schedule_info = false;
            $scope.qualifications = false;
        };
        $scope.schedule = function(){
            $scope.schedule_info = !$scope.schedule_info;
            $scope.paid_info = false;
            $scope.qualifications_info = false;
        };

        $scope.qualifications = function(){
            console.log("YAAYA");
            $scope.qualifications_info = !$scope.qualifications_info;
            $scope.paid_info = false;
            $scope.schedule_info = false;

        };
    };
    faqController.$inject = ['$scope'];
    angular.module('faqApp').controller('faqController', faqController);
}());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-app="faqApp" ng-controller="faqController" class="row">
                <div class="col-xs-12">
                    <h3>More Questions?</h3>
                    <h3 ng-click="paid()">+ This works</h3>
                    <p ng-show="paid_info">
                        This works
                    </p>
                    <h3 ng-click="schedule()">+ This also works</h3>
                    <p ng-show="schedule_info">
                        Ywoasfdswowow
                    </p>
                    <h3 ng-click="qualifications()">+ This is buggy</h3>
                    <ul ng-show="qualifications_info">
                        <li>sefsef</li>
                        <li>sefsfsefdsfsn</li>
                        <li>sefsefsdfsfdsfis</li>
                        <li>sfsfdsfsdfs</li>
                        <li>Csdfsdfsdfdsk</li>
                        <li>Hsdfsdfdsfs!</li>
                    </ul>
                </div>

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

Upvotes: 0

Views: 4209

Answers (2)

chenop
chenop

Reputation: 5143

You override the qualifications function inside paid() function:

$scope.qualifications = false;

probably you meant:

$scope.qualifications_info = false;

Upvotes: 1

Nitsan Baleli
Nitsan Baleli

Reputation: 5458

in this function:

$scope.paid = function(){
  $scope.paid_info = !$scope.paid_info;
  $scope.schedule_info = false;
  $scope.qualifications = false;
};

you're setting $scope.qualifications = false, which used to be a function.

you are erasing the function you use on the heading tag:

<h3 ng-click="qualifications()">

this is what's causing your bug.

after you click the 'this works' header, $scope.qualifications is set to false.

when you try to click the 'this is buggy' header, nothing happens because it's running $scope.qualifications, which is now set to false.

Upvotes: 6

Related Questions