Question

我在ServiceNow中构建了一个窗口小部件，显示用户的入职步骤，当点击一个步骤时，下面会出现一个div，列出了他们需要完成的所有任务。虽然这样可以正常工作，但我认为如果不是在使用行分隔符的入门步骤下面显示div，那么它将会更加光滑，任务列表将取代整个入门步骤div。然后可能有一个后退按钮，带回一些淡入/淡出动画的入门步骤。如果可能的话，我希望这可以在没有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有点难以理解，所以我不确定你想要隐藏/显示哪些块，但你可以非常简单地执行此操作。只需在您的范围上创建一个变量showTaskList，然后将其设置为true/false。然后在入职列表的父div上执行ng-if="!showTaskList"和任务列表的父div ng-if="showTaskList"。

当用户点击按钮在任务列表或新手入门步骤之间切换时，只需将此bool切换到相反的showTaskList = !showTaskList。

Answer 2

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

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

请注意，在这种情况下，您正在使用ng-if来创建/销毁DOM元素。如果您预计用户会返回并且经常使用，那么您也可以使用ng-show来显示/隐藏DOM元素（这样它们就可以预先创建并且只是隐藏而不是每次用户更改状态时都重新创建）

点击

2 个答案: