Question

我试图在图标点击时显示和隐藏下拉项，但它没有显示dropDown列表。这是我的代码。

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

也许您的控制台中有一个JS错误导致您的应用崩溃。检查您的控制台并告诉我们。另外，请查看此代码笔并查看其工作原理，但代码却没有。

您的相同代码已发布到codepen

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

下拉项目未显示ng-show

2 个答案: