使用Angular和Javascript翻转div并显示不同的内容

我有一个div中的代码。在div中，有列出输入行程的代码和输入单个行程的代码。我想使用angular只显示表单以输入每次行程，因此当单击submit按钮时，div将旋转并显示在div另一侧刚刚提交的内容。有没有一种方法可以像我设置的那样实现这一点

<div id="modal">
    <main ng-controller="TripsController as trips" id="temp-overflow">
      <!-- List of All the Users Trips -->
      <h2>All of your trips</h2>
      <ul>
        <li ng-repeat="trip in trips.current_user_trips">
          Title: {{trip.title}}
          Destination: {{trip.destination}}
          Description: {{trip.description}}
          Start Date: {{trip.start_date}}
        <div ng-controller="CommentsController as commentsCtrl">
          <h3>Comments:</h3>
            <ul>
              <li ng-repeat="comment in trip.comments">
                Entry: {{comment.entry}}
                Author: {{comment.commenter}}
              </li>
            </ul>
            <form ng-submit="commentsCtrl.createComment()">
              <input type="text" ng-model="commentsCtrl.newCommentEntry" placeholder="entry"/>
              <input type="submit" value="Comment"/>
            </form>
          </div>
        </li>
      </ul>

      <!-- Form to Enter Users Latest Trip -->
      <h2>Where have you been?</h2>
      <form ng-submit="trips.createTrip()">
        <input type="text" ng-model="trips.newTripTitle" placeholder="Title"/>
        <input class="search" places-auto-complete types="['geocode']" on-place-changed="placeChanged()"/>
        <input type="text" ng-model="trips.newTripDescription" placeholder="Description"/>
        <input type="date" ng-model="trips.newTripStartDate" placeholder="Start Date"/>
        <input type="date" ng-model="trips.newTripEndDate" placeholder="End Date"/>
        <input type="text" ng-model="trips.newTripNotes" placeholder="Notes"/>
        <input type="submit" value="Submit your Trip"/>
      </form>
    </main>
</div>

---

听起来您正在查找ng show和ng hide属性。可以在控制器中设置布尔值以显示或隐藏DOM的某些组件

以下是文档的链接：

---

希望这为您指明了正确的方向。

您是否要求实现具有角度的动画？或者根据条件显示/隐藏元素？这涉及大量javascript。你最好使用这样的插件