Angular js ng显示

时间:2013-08-20 10:28:21

标签: javascript jquery angularjs

Onclick我必须显示一个部分并使用角度概念隐藏另一部分。

我试过这些

<div data-ng-click="showDetails = ! showDetails">Apps</div>
<div data-ng-click="showDetails1 = ! showDetails1">Favorites</div>
<div data-ng-click="showDetails2 = ! showDetails2">Search</div>


<section id="workbench-search" data-ng-class="{ 'hidden': ! showDetails }">search</section>

    <section id="workbench-favorites" data-ng-class="{ 'hidden': ! showDetails1 }">fav</section>

    <section id="workbench-apps" data-ng-class="{ 'hidden': ! showDetails2 }">apps</section>

但是点击它并没有隐藏另一个,

你能以棱角分明的方式建议。新的角度概念

2 个答案:

答案 0 :(得分:2)

尝试

<div ng-click="showDetails = !showDetails; showDetails1 = false; showDetails2 = false;">Apps {{showDetails}}</div>
<div ng-click="showDetails1 = !showDetails1; showDetails = false; showDetails2 = false;">Favorites {{showDetails1}}</div>
<div ng-click="showDetails2 = !showDetails2; showDetails = false; showDetails1 = false;">Search {{showDetails2}}</div>


<section id="workbench-search" ng-class="{ 'hidden': !showDetails }">search</section>

<section id="workbench-favorites" ng-class="{ 'hidden': !showDetails1 }">fav</section>

<section id="workbench-apps" ng-class="{ 'hidden': !showDetails2 }">apps</section>

演示:Plunker

答案 1 :(得分:1)

这对你有用。 试试这个

<div data-ng-click="showDetails = ! showDetails;showDetails1 = false;showDetails2 = false">Apps</div>
<div data-ng-click="showDetails1 = ! showDetails1;showDetails = false;showDetails2 = false">Favorites</div>
<div data-ng-click="showDetails2 = ! showDetails2;showDetails = false;showDetails1 = false">Search</div>


<section id="workbench-search" data-ng-class="{ 'hidden': ! showDetails }">search</section>

<section id="workbench-favorites" data-ng-class="{ 'hidden': ! showDetails1 }">fav</section>

<section id="workbench-apps" data-ng-class="{ 'hidden': ! showDetails2 }">apps</section>