ドロップダウンアイテムがng-showで表示されない

Question

アイコンがクリックされてもドロップダウンリストが表示されないときに、ドロップダウンアイテムを表示および非表示にしようとしています。 ここに私のコードです。

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

Answer 1

がオブジェクトを作成してみて、そのオブジェクトにshowDropDownContentsを追加します。

<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.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のエラーを持っています。あなたのコンソールをチェックし、私たちに知らせてください。また、このコードペンをチェックして、それがなぜ機能するのか見てみましょうが、あなたのコードはそうではありません。なし：

はあなたと同じコードが

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