单击时将 div 替换为另一个 div

Question

我在 ServiceNow 中构建了一个小部件，它显示用户的入职步骤，当点击一个步骤时，下面会出现一个 div，列出他们需要完成的所有任务。虽然这很好用，但我认为如果不使用 div 一行 divider 在入职步骤下方显示一个 div，任务列表将取代整个入职步骤，这样看起来会更流畅div。然后可能有一个后退按钮，通过一些淡出 in/fade 动画将他们带回到入职步骤。如果可能的话，我希望在没有 jquery 的情况下完成此操作。有人可以提供一些指导或指导我举个例子吗？

我的 HTML 目前看起来是这样的：

<div class="container" ng-if="!c.data.loading && c.stage.length>0">
  <div class="parent">
    <div class="child" ng-repeat="item in c.stage track by $index">
      <div class="at-work-process position-relative overflow-hidden text-center">
        <div class="at-work-process-text">
          <span class="at-work-process-step" ng-class="{inactive: item.workflow_order>c.currentOrder}">Step</span>
          <span class="at-work-process-number" ng-class="{inactive: item.workflow_order>c.currentOrder}">{{$index+1}}</span>
          <span class="at-work-process-number-text" ng-class="{inactive: item.workflow_order>c.currentOrder}">{{item.workflow_stage}}</span>
          <div class="at-separator-thick" ng-class="{active_stage: item.currentStage, completed_stage: item.incompleteTotal==0 && item.workflow_order<c.currentOrder}"></div>
        </div>
        <div ng-click="showDetails(item);" class="at-work-process-details" ng-class="{inactive: item.workflow_order>c.currentOrder}">          
          <div ng-if="item.incompleteTotal>0 && item.workflow_order<=c.currentOrder" class="full-height">
            <i class="material-icons" style="color:#e53935;">assignment_late</i>
            <span ng-if="item.incompleteTotal>1">Incomplete <br/> {{item.incompleteTotal}} Tasks Require Your Attention</span>
            <span ng-if="item.incompleteTotal==1">Incomplete <br/> {{item.incompleteTotal}} Task Require Your Attention</span>
          </div>
          <div ng-if="item.incompleteTotal==0 && item.workflow_order>c.currentOrder" class="full-height">
            <i class="material-icons" style="color:#78B4F3;">assignment</i>
            <span>Not Started</span>
          </div>
          <div ng-if="item.incompleteTotal==0 && item.workflow_order<c.currentOrder" class="full-height">
            <i class="material-icons" style="color:#43A047;">assignment_turned_in</i>
            <span>Complete</span>
          </div>
        </div>
      </div>
    </div> 
  </div>

//我希望下面的div能代替上面的div而不是出现在下面//

  <div ng-if="active_tasks.length>0" ng-class="taskClass" class="text-center tasksDiv">
    <md-divider></md-divider>
    <h3>{{active_workflow}} Tasks:</h3>
    <ul style="list-style:none; padding-left:0; display:inline-block">
      <li ng-repeat="tasks in active_tasks track by $index" style="display:flex; align-items:center; padding-bottom:0.5rem;">
        <i class="material-icons" style={{tasks.style}}>{{tasks.icon}}</i>
        <a ng-if="tasks.url.indexOf('table2')!=-1" ng-click="c.enroll(tasks)" href="javascript: void(0)" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
        <a ng-if="tasks.url.indexOf('table1')!=-1" ng-click="c.tableNew()" href="javascript: void(0)"ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
        <a ng-if="tasks.hr_task_type=='url' && tasks.url.indexOf('c.')==-1" href="{{tasks.url}}" target="_blank" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
                <a ng-if="tasks.url.indexOf('launchWith')!=-1" ng-click="c.launchWith()" href="javascript: void(0)" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
        <a ng-if="tasks.hr_task_type!='url'" ng-click="review(tasks)" href="javascript: void(0)" target="_blank" ng-class="{completed_inactive: tasks.state==3}">{{tasks.short_description}}</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

您的 html 有点难以理解，所以我不确定您想要 hide/show 哪个块，但您可以非常简单地做到这一点。只需在您的作用域上创建一个变量 showTaskList 并将其设置为 true/false。然后在入职列表的父级 div 上执行 ng-if="!showTaskList" 并在任务列表的父级 div 上执行 ng-if="showTaskList".

当此人单击按钮在任务列表或入职步骤之间切换时，只需将此 bool 切换到相反的方向，showTaskList = !showTaskList。

Answer 2

我会将 ng-if 附加到第一个 div，它在第二个 div 的相反条件下工作。

所以在这种情况下，您的第二个 div 的显示条件是 ng-if="active_tasks.length>0"。因此，您可以在第一个 div 上设置一个 ng-if="active_tasks.length<=0"，以便在显示第二个 div 时，第一个 div 的条件将为假。然后只需删除第二个 div 中的 divider（因为您不再需要它）。现在，当您对第一个 div 执行操作并填充 active_tasks 时，第一个将被销毁，第二个将被创建。

请注意，在这种情况下，您使用的是 ng-if，这将 create/destroy DOM 个元素。您还可以使用 ng-show 到 show/hide DOM 元素，如果您预计用户会返回并返回很多（这样它们是预先创建的并且只是隐藏而不是每次都重新创建用户更改状态的时间）

单击时将 div 替换为另一个 div

Replacing div with another div on click

html

css

angularjs

servicenow