ng-show 不显示下拉项

Question

I am trying to show and hide dropdown item when the icons clicks but it is not showing the dropDown list. Here is my code.

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

Here is my controller:

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

Answer 1

Try creating an object and add showDropDownContents to that object. Something like:

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

Here's a link that will be useful to clarify why: http://www.codelord.net/2014/05/10/understanding-angulars-magic-dont-bind-to-primitives/

Answer 2

Your Code works 4.0 here

Perhaps you have a JS error in your console that is crashing your app. Check your console and let us know. Also, check out this code pen and see why it works, but your code does not.

Your same code posted to codepen

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