How do I reference a dynamic variable inside angular expression braces?

Question

I've looked high and low for an answer to this, but nothing that directly addresses this. The issue is this -- I have a function that gets a list of calendars from an endpoint. I have another function that counts the number of events for each calendar. I have it creating a dynamic variable every time it's called in the ng-repeat list, attaching the calendar ID to the word "count" as the variable name.

function getEventsCount(calendarId) {
  if(calendarId !== '') {
    calendarService.getCalendarEvents(calendarId, fromDate, toDate).then(function (result) {
      if(isSuccessResponse(result)) {
        $scope['count' + calendarId] = result.events.length;
      } else {
        $scope.errorMessage = errorText + result.errorMessage;
      }
    });
  }
}

In the HTML I want to display the numerical count of events for each calendar, but since we're iterating through an ng-repeat list which will return any given number of calendar IDs, I don't know what the variable name for count will be, so I need angular to somehow parse the variable name inside of those braces for the value.

<ul class="list-group">
  <li class="list-group-item" data-ng-repeat="calendar in calendarList.calendars" data-ng-init="getEventsCount(calendar.id)">
    <a roll="button" class="btn-link" data-ng-click="showCalendar(calendar.id, calendar.summary)">{{calendar.summary}} ({{count + calendar.id}})</a>
  </li>
</ul>

Forgive me if the question is muddy, I'll be happy to clarify if needed.

Why can't you assign the count property to your calender object and just use that instead of some complex scope dictionary? — ryanyuyu
– ryanyuyu, Commented May 15, 2015 at 19:02
Because it's an endpoint on a server that I don't have edit access to, I assumed I couldn't add a property to the existing object. — visarts
– visarts, Commented May 15, 2015 at 19:03

Carl G · Accepted Answer · 2015-05-15 19:05:36Z

1

What about just putting the counts inside an object on the scope, keyed by their id? Then you can index into the object in the expression using the id:

$scope.counts = {};
function getEventsCount(calendarId) {
  if(calendarId !== '') {
    calendarService.getCalendarEvents(calendarId, fromDate, toDate).then(function (result) {
      if(isSuccessResponse(result)) {
        $scope.counts[calendarId] = result.events.length;
      } else {
        $scope.errorMessage = errorText + result.errorMessage;
      }
    });
  }
}

Template:

<ul class="list-group">
  <li class="list-group-item" data-ng-repeat="calendar in calendarList.calendars" data-ng-init="getEventsCount(calendar.id)">
    <a roll="button" class="btn-link" data-ng-click="showCalendar(calendar.id, calendar.summary)">{{calendar.summary}} ({{counts[calendar.id]}})</a>
  </li>
</ul>

answered May 15, 2015 at 19:05

Carl G

18.4k14 gold badges97 silver badges122 bronze badges

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

2 Comments

visarts Over a year ago

I'm getting an error message TypeError: Cannot set property 'df0086fe87a1431dae5ba2f7baf0f634' of undefined df0086fe87a1431dae5ba2f7baf0f634 in this case being the calendar ID The error is triggered at '$scope.counts[calendarId]'

visarts Over a year ago

Nevermind, I forgot the $scope.counts = {}; Works great, thank you!!

Collectives™ on Stack Overflow

How do I reference a dynamic variable inside angular expression braces?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related