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中设置一个布尔值，以显示或隐藏DOM的某些组件。

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

希望这能指出你正确的方向。

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

1 个答案: