ng-show 不显示下拉项

Question

我试图在单击图标时显示和隐藏下拉项，但未显示下拉列表。 这是我的代码。

<div ng-click="showDropDown()" class="dropDown">
    <i style="font-size:25px" class="fa fa-folder-o"> </i>
    <div ng-show="showDropDownContents" id="myDropDown" class="dropDownContent">
        <label class="dropDownItem" ng-click="moveItem()">Item1</label>
        <label class="dropDownItem" ng-click="moveContents()">Item2</label>
    </div>
</div>

这是我的控制器：

$scope.showDropDownContents = false; //Initialised to false.
$scope.showDropDown = function() {
    $scope.showDropDownContents = !$scope.showDropDownContents;
};

Answer 1

尝试创建一个对象并将 showDropDownContents 添加到该对象。 类似的东西：

$scope.viewModel = {
   showDropDownContents: false
} 
$scope.showDropDown = function() {
   $scope.viewModel.showDropDownContents = false
}

<div ng-show="viewModel.showDropDownContents" id="myDropDown" class="dropDownContent">
        <label class="dropDownItem" ng-click="moveItem()">Item1</label>
        <label class="dropDownItem" ng-click="moveContents()">Item2</label>
    </div>

这是一个有助于澄清原因的链接： http : //www.codelord.net/2014/05/10/understanding-angulars-magic-dont-bind-to-primitives/

Answer 2

你的代码在这里工作 4.0

也许您的控制台中有一个 JS 错误导致您的应用程序崩溃。 检查您的控制台并告诉我们。 另外，请查看此代码笔并了解它为什么起作用，但您的代码却不起作用。

您发布到 codepen 的相同代码

$scope.showDropDownContents = false; //Initialised to false.
$scope.showDropDown = function() {
$scope.showDropDownContents = !$scope.showDropDownContents;
};