使用Angular和Javascript翻轉div並顯示不同的內容

Question

我有這個代碼是在一個div。在div中，有代碼列出輸入的行程和輸入個別行程的代碼。我想使用angular來僅顯示錶單來輸入每次旅行，因此當點擊提交按鈕時，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> 

Answer 1

聽起來你正在尋找ng-show和ng-hide屬性。您可以在控制器中設置布爾值來顯示或隱藏DOM的某些組件。

下面是對文件的鏈接： https://docs.angularjs.org/api/ng/directive/ngShow

希望這點你在正確的方向。