AngularJS access scope from outside ng-repeat

Question

I want to show the count of items repeated in my ng-repeat but how to I access this from outside the ng-repeat?

Plunker: http://plnkr.co/edit/SYqb8h9k81SlVY3Yzhgx

HTML:

<h3>Number of locations is: {{location.length}}</h3>

<div ng-controller="locationAccordionCtrl">
  <div ng-repeat="location in locations" on-finish-render>

    {{location.siteName}}

    <ul>
        <li ng-repeat="listOfLocations in location.locationsList track by $index">
            {{listOfLocations}}
        </li>
    </ul>

  </div>
</div>

JS:

var App = angular.module('App', []);

App.controller('locationAccordionCtrl', function ($scope) {

  $scope.locations = [
    {
      "siteName":"First Location",
      "locationsList":['First Location 1', 'First Location 2', 'First Location 3']
    },
    {
      "siteName":"Second Location",
      "locationsList":['Second Location 1', 'Second Location 2', 'Second Location 3']
    },
    {
      "siteName":"Third Location",
      "locationsList":['Third Location 1', 'Third Location 2', 'Third Location 3']
    }
  ];

});

Fernando Pinheiro · Accepted Answer · 2015-10-07 16:32:41Z

1

The <h3> tag must be in the scope of the locationAccordionCtrl. So, put it inside the <div ng-controller="locationAccordionCtrl"> tag. Also, you have to say {{locations.length}} instead of {{location.length}} (missing the "s")

answered Oct 7, 2015 at 16:32

Fernando Pinheiro

1,8262 gold badges18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zack Tanner · Accepted Answer · 2015-10-07 16:32:37Z

0

The problem is not that it is outside of ng-repeat, but rather that it is outside your controller. The following should work:

<div ng-controller="locationAccordionCtrl">
<h3>Number of locations is: {{locations.length}}</h3>
[...]

answered Oct 7, 2015 at 16:32

Zack Tanner

2,5801 gold badge29 silver badges45 bronze badges

Comments

michelem · Accepted Answer · 2015-10-07 16:33:32Z

0

Put the bind inside the controller:

<div ng-controller="locationAccordionCtrl">
  <h3>Number of locations is: {{locations.length}}</h3>
  <div ng-repeat="location in locations" on-finish-render>

    {{location.siteName}}

    <ul>
        <li ng-repeat="listOfLocations in location.locationsList track by $index">
            {{listOfLocations}}
        </li>
    </ul>

  </div>
</div>

answered Oct 7, 2015 at 16:33

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Comments

Dmitri Algazin · Accepted Answer · 2015-10-07 16:35:13Z

0

<div ng-controller="locationAccordionCtrl">

<h3>Number of locations is: {{locations.length}}</h3>

<div ng-repeat="location in locations" on-finish-render>

{{location.siteName}} ({{location.locationsList.length}})

<ul>
    <li ng-repeat="listOfLocations in location.locationsList track by $index">
        {{listOfLocations}}
    </li>
</ul>

</div>
</div>

answered Oct 7, 2015 at 16:35

Dmitri Algazin

3,4541 gold badge33 silver badges32 bronze badges

Collectives™ on Stack Overflow

AngularJS access scope from outside ng-repeat

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related