NG-ショーは、のみ表示されますが、再び

Question

var app=angular.module('app',[]);

.box 
 
{ 
 
width:50px; 
 
height:50px; 
 
background-color:red; 
 
} 
 
span 
 
{ 
 
position:absolute; 
 
left:190px; 
 
top:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <input ng-click="showBox =! showBox" placeholder="Click me"/> 
 
    <div class="box" ng-show="showBox"></div> 
 
    <span>Hide box</span> 
 
</div>

ねえ、私は非常に新しいAngularJSのユーザーのための一つの質問を持ってクリックした場合の要素を非表示にしないでください。これは唯一のexapmleですが、アイデアを示しています。入力をクリックするとred divが表示されますが、もう一度クリックするとdivが隠れます。しかし、私はその2番目のクリックがこのdivを非表示にすることを望んでいません。私はそのクリックを希望しますHide box divを隠す私は赤のdivを示すがクリック再び

Answer 1

使用

ng-click="showBox = true" 

は、それが偽として初期化されますと仮定した場合に非表示にしていない入力にそのクリックをしたいと思います。

あなたが非表示ボックスがちょうどtrueに設定

<span ng-click="showBox = false">Hide box</span> 

Answer 2

を使用使用して非表示にしたい場合は、

ng-click="showBox = true" 

DEMO

var app=angular.module('app',[]); 
 
app.controller("dobController", ["$scope", 
 
    function($scope) { 
 
    $scope.showBox =false; 
 
    } 
 
]);

.box 
 
{ 
 
width:50px; 
 
height:50px; 
 
background-color:red; 
 
} 
 
span 
 
{ 
 
position:absolute; 
 
left:190px; 
 
top:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <input ng-click="showBox = true" placeholder="Click me"/> 
 
    <div class="box" ng-show="showBox"></div> 
 
    <span>Hide box</span> 
 
</div>