javascript - 使 bootstrap cols 与 angular ng-show 一起玩得很好

Question

我有 col-md-4 等宽的三列，但是中间的列设置了 ng-show，有时不显示。现在，当 friend 请求进来并且最右边的 col-md-4 出现时，它出现在中间，而中间的仍然隐藏。我如何让中间的 col-md-4 chatWindow 隐藏起来仍然占用空间？

<div class="row">

  <div class="col-md-4 friendListWindow" ng-init="getFriends()">
    Friends List
    <form ng-submit='addFriend(username)' name='addFriendForm'>
      <input type='text' name='username' ng-model='username' required/>
      <input type='submit' ng-disabled='!addFriendForm.$valid' value='Add Friend'>
    </form>
    Online Friends
    <ul>
      <span ng-repeat='friend in friends track by $index | orderBy:"name"' ng-click='startChat(friend)'>
        <li ng-if='friend.online'>
          <span class='friendService'>{{friend.service}}</span>
          <span class='friendName'>{{friend.name}}</span>
        </li>
      </span>
    </ul>
  </div>


  <div class="col-md-4 chatWindow" ng-show="activeFriend">
    <div class="activeFriendBox">Chat with {{activeFriend.name}}</div>

    <div class="messages">
      <div ng-repeat='message in activeFriend.messages track by $index | orderBy:"timeStamp"'>
        <span>{{message.from}}</span>
        <span>{{message.message}}</span>
        <span>{{message.timestamp}}</span>
      </div>
    </div>

    <div class="sendMessage">
      <form ng-submit='sendMessage(messageText)' name='messageForm'>
        <input type='text' name='message' ng-model='messageText' required/>
        <input ng-disabled='!messageForm.$valid' type='submit' value='send'/>
      </form>
    </div>
  </div>

  <div class="col-md-4 friendRequestsWindow">
    <div class="friendRequests">
      <ul>
        <li ng-repeat='friend in friendRequests track by $index'>
          <span>New friend Request from: {{friend}}</span>
          <button ng-click='acceptFriendRequest(friend)'>Accept</button>
          <button ng-click='ignoreFriendRequest(friend)'>Ignore</button>
        </li>
      </ul>
    </div>

    <div class="acceptedFriendRequests">
      <ul>
        <li ng-repeat='friend in acceptedfriendRequests track by $index'>
          <span>{{friend}} accepted your friend request</span>
          <button ng-click='acknowledgeFriendRequest($index)'>Acknowledge</button>
        </li>
      </ul>
    </div>
  </div>

</div>

Answer 1

您可以在列内容中使用 ng-show 而不是列本身

代替

<div class="col-md-4" ng-show="xxx">content</div>

使用

<div class="col-md-4">
    <div ng-show="xxx">content</div>
</div>