javascript - 使用 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 属性。您可以在 Controller 中设置一个 bool 值来显示或隐藏 DOM 的某些组件。

这是文档的链接: https://docs.angularjs.org/api/ng/directive/ngShow

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