Question

我试图隐藏/显示基于点击的div。当页面加载时，div被隐藏，这是预期的行为，但我必须单击两次才能让它开始切换。我在这里错过了什么？

这是我的代码

<a href ng-click="ShowOrHide('01')" class="list-group-item">Night 1</a> <div ng-show="showNight">{{night}}</div>

这是角度模块

var MyApp = angular.module("MyModule", []);
MyApp .controller("MyController", function ($scope){
    $scope.test = "This is from angular";
    $scope.showNight = "false";
    $scope.ShowOrHide = function(night){
        $scope.night = "night " + night;
        $scope.showNight = !$scope.showNight;
    };

});

Answer 1

问题是您将$(document).ready(function(){ $('#list').scroll(function() { $('div').removeClass("active"); $(this).addClass("active"); }); });设置为字符串$scope.showNight，这是一个非空的字符串。如果您将"false"设置为$scope.showNight（而不是字符串），则应将其修复。

More info on truthy and falsy values in JS

Answer 2

点击两次$scope.showNight后，设置为boolean为真。

$scope.showNight = false;
            $scope.ShowOrHide = function(night) {
                $scope.night = "night " + night;
                $scope.showNight = !$scope.showNight;
            };

Answer 3

您必须使用$scope.showNight = false;代替$scope.showNight = "false";。

ng-show需要两次点击才能开始切换

3 个答案: