AngularJS Ng-click仅适用于一次或两次

Question

AngularJS Ng-click仅适用于一次或两次

Ng-click触发ng-show与之前的相反.当ng-show附加到前两个项目中的p标签时,它可以正常工作.当ng-show附加到ul时,事情开始变得越来越糟糕.如果它是第一次点击页面,我可以像一次点击错误的触发器,点击其他东西......它将停止工作.这里发生了什么？谢谢.

(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);
}());

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Nit*_*eli 6

在这个功能:

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

Run Code Online (Sandbox Code Playgroud)

你正在设置$scope.qualifications = false,曾经是一个功能.

您正在删除标题标记上使用的函数:

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

Run Code Online (Sandbox Code Playgroud)

这就是造成你的错误的原因.

单击"this works"标题后,$ scope.qualifications设置为false.

当你试图点击'this is buggy'标题时,没有任何反应,因为它正在运行$scope.qualifications,现在设置为false.

归档时间：	11 年，7 月前
查看次数：	3800 次
最近记录：	10 年，12 月前