AngularJS: controlling ng-show from outside ng-repeat

Question

I'm in the middle of learning Angular, and I am attempting to show or hide contents in a content div depending on side menu items being clicked.

<div id="side-menu">
  <h3>Side Menu</h3>
  <div ng-repeat="item in example">
    <p ng-click="collapsed=!collapsed">
      API Name: {{ item.name }}
    </p>
  </div>
</div>
<div id="content">
  <h3>Content</h3>
  <!-- What do I have to add here to "connect" to "item in example"? -->
  <div ng-show="collapsed">
    <p>Debug: {{ item.debug }}</p>
    <p>Window: {{ item.window }}</p>
  </div>
</div>

What do I have to add to controller ng-show from the other div?

it looks like item.debug and item.window are outside the markup being generated using ng-repeat. I would move them up/enclose them in the div that has ng-repeat on it — thescientist, Oct 17 '13 at 19:35

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

Use $parent:

ng-click="$parent.collapsed=!$parent.collapsed"

Example: http://jsfiddle.net/cherniv/6vhH3/

Read this to understand the most important basics of Angular' scopes.

edited May 23 '17 at 12:21

Community

1
1

answered Oct 17 '13 at 19:17

Ivan Chernykh

41,617
13
134
146

Close, but `item.debug` and `item.window` don't display anything. I updated the [fiddle](http://jsfiddle.net/evanemolo/6vhH3/1/). – Evan Emolo Oct 17 '13 at 19:32
@EvanEmolo ah , i see.. no problem , take a look : http://jsfiddle.net/cherniv/hn55a/ – Ivan Chernykh Oct 17 '13 at 19:36

AngularJS: controlling ng-show from outside ng-repeat

1 Answers1