Question

我有一个显示/隐藏另一个部分的ng-click，它都在同一个整体div中。我想将show / hide部分移动到它自己的div，但是当这样做时，ng-click不再有效。我当前的代码看起来像这样：

<div class="container">
  <div class="child" ng-repeat="item in c.list | unique: 'workflow_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-number">{{$index+1}}</span>
        <span class="at-work-process-number-text">{{item.workflow_stage}}</span>
        <div class="at-separator-thick"></div>
      </div>
      <div ng-click="showDetails = ! showDetails" class="at-work-process-details">
        <i ng-if="!data.allComplete" class="material-icons" style="color:#d32f2f;">error</i><span ng-if="!data.allComplete">Incomplete</span>
                <i ng-if="data.allComplete" class="material-icons" style="color:#81c784;">check_circle</i><span ng-if="data.allComplete">Complete</span>
      </div>
    </div> 

    <div ng-show="showDetails" class="text-center">
        <h3>{{item.workflow_stage}} Tasks:</h3>
        <ul style="list-style:none; padding-left:0; display:inline-block">
        <li ng-repeat="tasks in c.list" style="display:flex; align-items:center;">
          <i class="material-icons" style={{tasks.style}}>{{tasks.icon}}</i><a href="{{tasks.url}}" target="_blank">{{tasks.short_description}}</a>
        </li>
      </ul>
    </div>
    </div>
</div>

我想要的是这样的：

<div class="container">
  <div class="child" ng-repeat="item in c.list | unique: 'workflow_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-number">{{$index+1}}</span>
        <span class="at-work-process-number-text">{{item.workflow_stage}}</span>
        <div class="at-separator-thick"></div>
      </div>
      <div ng-click="showDetails = ! showDetails" class="at-work-process-details">
        <i ng-if="!data.allComplete" class="material-icons" style="color:#d32f2f;">error</i><span ng-if="!data.allComplete">Incomplete</span>
                <i ng-if="data.allComplete" class="material-icons" style="color:#81c784;">check_circle</i><span ng-if="data.allComplete">Complete</span>
      </div>
    </div> 
  </div>
</div>

    <div ng-show="showDetails" class="text-center">
        <h3>{{item.workflow_stage}} Tasks:</h3>
        <ul style="list-style:none; padding-left:0; display:inline-block">
        <li ng-repeat="tasks in c.list" style="display:flex; align-items:center;">
          <i class="material-icons" style={{tasks.style}}>{{tasks.icon}}</i><a href="{{tasks.url}}" target="_blank">{{tasks.short_description}}</a>
        </li>
      </ul>
    </div>

一旦我将showDetails部分移到整个容器div之外，是否有理由说ng-click不再有效？我需要更改什么才能再次使用？

Answer 1

我相信对div有误解。

<div ng-show="showDetails" class="text-center">
        <h3>{{item.workflow_stage}} Tasks:</h3>
        <ul style="list-style:none; padding-left:0; display:inline-block">
        <li ng-repeat="tasks in c.list" style="display:flex; align-items:center;">
          <i class="material-icons" style={{tasks.style}}>{{tasks.icon}}</i><a href="{{tasks.url}}" target="_blank">{{tasks.short_description}}</a>
        </li>
      </ul>
    </div>

这里你使用item.workflow_stage，但是你要在它到达这里之前关闭使用该项目的div。

ng-show div移出整体div

1 个答案: