ng-click doesn't work once ng-show div is moved out of overall div

Question

I have a ng-click that shows/hides another section, which is all within the same overall div. I want to move the show/hide section to its own div, but when do this, the ng-click no longer works. My current code that works looks like this:

<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>

What I want looks like this:

<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>

Is there a reason why the ng-click no longer works once I move the showDetails section outside of the overall container div? What do I need to change in order for it to work again?

score 0 · Answer 1 · answered Jan 10 '18 at 20:22

I belive there was a misunderstanding on divs.

<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>

here you use item.workflow_stage, but you are closing the div that uses the item before it reaches here.

thanks for the tip, I commented out that line and it still doesn't work so I don't think that's preventing the code from working, but I'll def keep that in mind. — Dave, Jan 10 '18 at 20:26

ng-click doesn't work once ng-show div is moved out of overall div

1 Answers1