Question

我想切换我将在用户和帖子之间显示的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>

Answer 1

您可以使用此逻辑

分解为分

ng-init to initiale 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>

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

1 个答案: