Question

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

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

Answer 1

在这个函数中：

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

您正在设置$scope.qualifications = false，这曾是一个功能。

您正在删除标题标记上使用的功能：

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

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

点击“＆＃39”后，这样可以使用＆＃39; header，$ scope.qualifications设置为false。

当您尝试点击“这是错误的＆＃39;标题，没有任何反应，因为它正在运行$scope.qualifications，现在设置为false。

Answer 2

您可以覆盖资格认证功能在paid（）函数内：

$scope.qualifications = false;

可能你的意思是：

$scope.qualifications_info = false;

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

2 个答案: