我如何切换 ng-show .. 按钮切换时更改 Html 和数据显示答案

【问题标题】：How do i toggle ng-show.. Change Html and data display when button toggles我如何切换 ng-show .. 按钮切换时更改 Html 和数据显示
【发布时间】：2015-04-14 06:09:32
【问题描述】：

我想切换我将在用户和帖子之间显示的 html+数据。这有点像 instagram 帖子/用户的功能

<div ng-controller="MainCtrl">
     <div class="button-bar">
      <a class="button" ng-class="{'button-positive': isActive('posts')}" ng-click="setActive('posts')">Posts</a>
      <a class="button" ng-class="{'button-positive': isActive('users')}" ng-click="setActive('users')">User</a>
    </div>
</div>

<div class="users">
<ul>
   <li ng-repeat="user in users" href="#/tab/user/{{user.id}}">
        <img ng-src="{{user.face}}">
        <h2>{{user.name}}</h2>
   </li>
</ul>
</div>

<div class="posts">
<ul>
   <li ng-repeat="post in posts" href="#/tab/post/{{post.id}}">
        <h2>{{post.name}}</h2>
        <p>{{post.description}}</p>
   </li>
</ul>
</div>

【问题讨论】：

标签： html angularjs dom

【解决方案1】：

你可以使用这个逻辑

分解成点

ng-init 初始化initialtoggle 设置初始值
现在在ng-click 上检查更改initialtoggle 的值。
.. ng-class 将initialtoggle 与user 或posts 值比较为申请适当的课程。

用ng-if comapiring 值显示适当的 div initialtoggle.

 <div ng-controller="MainCtrl" ng-init="initialtoggle='user'">
     <div class="button-bar">
      <a class="button" 
 ng-class="{'button-positive': initialtoggle == 'posts'}"  
 ng-click="initialtoggle='posts'">Posts</a>

 <a class="button" ng-class="{'button-positive': initialtoggle == 'user'}" 
ng-click="initialtoggle='user'">User</a>
    </div>
 </div>

<div class="users" ng-if="initialtoggle=='user'">
<ul>
   <li ng-repeat="user in users" href="#/tab/user/{{user.id}}">
        <img ng-src="{{user.face}}">
        <h2>{{user.name}}</h2>
       </li>
</ul>
</div>

<div class="posts" ng-if="initialtoggle=='user'">
<ul>
   <li ng-repeat="post in posts" href="#/tab/post/{{post.id}}">
        <h2>{{post.name}}</h2>
         <p>{{post.description}}</p>
       </li>
</ul>
</div>

【讨论】：