Databases
StackOverflow2013
Postsdbo
POAngular ng-repeat causes isolated scope
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngular ng-repeat causes isolated scope
    primarykey
    data
    text
    <p>I could use help with understanding how to make these 2 examples work in the same way. For starters, here's my full example: <a href="http://jsfiddle.net/tylerbrinks/DZbfD/" rel="nofollow">http://jsfiddle.net/tylerbrinks/DZbfD/</a></p> <p>I'm using a simple controller to manage index. I realize it's not 100% necessary, but I'm simplifying a much larger problem down to it's most basic parts for help. The controller looks like this:</p> <pre><code>function TabCtrl($scope){ $scope.index = 0; } </code></pre> <p>I'm using the <strong>index</strong> value to maintain which item in a list is selected (like tabs).</p> <p>When elements are already in the DOM, they behave exactly as I'd expect. Clicking each item toggles which item is selected. In the JsFiddle, the color changes to show the selected item.</p> <pre><code>&lt;div ng-controller="TabCtrl"&gt; &lt;div ng-class="{selected: index == 0}" ng-click="index = 0"&gt;Click Me. Position is 0, scope.index is {{index}}&lt;/div&gt; &lt;div ng-class="{selected: index == 1}" ng-click="index = 1"&gt;Click Me. Position is 1, scope.index is {{index}}&lt;/div&gt; &lt;div ng-class="{selected: index == 2}" ng-click="index = 2"&gt;Click Me. Position is 2, scope.index is {{index}}&lt;/div&gt; &lt;/div&gt; </code></pre> <p>That's perfect - behaves as I'd like. My problem is that I have a dynamic list and I'm using <strong>ng-repeat</strong> to build it out. When I do, <strong>ng-repeat</strong> seems to give a new scope to each item in the list. That means I can't toggle between them because they don't share the same <strong>index</strong> property. Instead, each list item has it's own scope and each scope has a unique <strong>index</strong> value.</p> <p>Here's the same thing, but using ng-repeat. Instead of hard coding the index on click, I'm setting it to the $index property of the repeater.</p> <pre><code>&lt;div ng-controller="TabCtrl"&gt; &lt;div ng-repeat="item in [1,2,3]" ng-class="{selected: index == $index}" ng-click="index = $index"&gt;Click Me. Position is: {{$index}}, scope.index is {{index}}&lt;/div&gt; &lt;/div&gt; </code></pre> <p>How can I make the dynamic list share a single scope like the static list?</p> <p>Thanks for the help!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USTyler Brinks
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COHave you tried creating an object in the parent scope, which will be present in all the children ? Like in the TabCtrl you can create some `$scope.sharedObject={index:0}` then modify the `sharedObject.index` in each item
      singulars
      1. POAngular ng-repeat causes isolated scope
      1. USDotDotDot
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload