使用ng-click显示/隐藏angular

Question

我试图创建一个小动画时，按钮被点击它会显示一个div和隐藏时，再次点击。搜索面板的不透明度为0,css希望是切换效果，而不是显示/隐藏。

<button class="searchCtrl" ng-click="clickthis">Toggle</button>
    <div class="searchPanel" ng-show="showthis">
        <form action="">
                <input type="text" placeholder="Enter postcodde" class="form-control input-sm mb-10">
                <select name="jobtype" id="" class="form-control input-sm">
                    <option value="permanent">Permanent</option>
                    <option value="parttime">Part-time</option>
                    <option value="contract">Contract</option>
                </select>
        </form>
    </div>
.searchPanel{
    position: relative;
    z-index: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    display: inline-block;
    padding: 15px;
    //opacity: 1;
}
button{
    position: relative;
    display: block;
}

Answer 1

这里有一个jsFiddle与您的工作示例。你只需要把按钮改成

<button class="searchCtrl" ng-click="showThis=!showThis">Toggle</button>

试着阅读ngClick的文档。

Answer 2

你可以这样做:

 <button class="searchCtrl" ng-click="showthis=!showthis">Toggle</button>

显示/隐藏动画。这是一个plunker: plunker