使用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

希望这点你在正确的方向。