current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

I'm using AngularJS ng-repeat to create a list of cities. The list is being built dynamically client-side by the user. The user selects city from a list on the left side of the page, clicks the "Add City" button, and the city is added to a list on the right. The ng-repeat is in both lists, but when a city is added to the list on the right, the $index value for the list items does not update. The $index values are all zero.

Here's the ng-repeat list where the cities are added dynamically:

<div ng-repeat="(key, value) in filter.selectedCities | groupBy:'country'" class="text-left">
    <div ng-repeat="(key2, value2) in value | groupBy:'state'" class="text-left">
        <span class="label label-default">{{key}}   </span>&nbsp;<span class="label label-danger" ng-show="key2.length">{{key2}}    </span>
        <ul class="nav nav-pills">
            <li class="selectedpill" ng-repeat="city in value2">
                <div class="pull-left">
                    <span class="indent8">{{ city.label | characters:24 :true}}</span>
                </div>
                <div class="pull-right">
                    <i class="fa fa-heart pointer" ng-click="addToCityFavs($index);" ng-class="{'maroonzheimer' : checkFavCity(city)}" ng-hide="savingCityFav" title="Add To Favorites"></i>
                    <i class="fa fa-spinner fa-spin" ng-show="savingCityFav"></i>
                    <i class="fa fa-times fa-lg pointer" ng-click="removeCity(city)" title="Remove City"></i>
                </div>
            </li>
        </ul>
    </div>
</div>

Here are the JavaScript functions used to add a city dynamically to the list:

  $scope.addSelectedCity = function () {
    if ($scope.selectedCity && $scope.selectedCity.value) {
      $scope.addCity($scope.selectedCity);
      $scope.cityValidationError = false;

    } else { $scope.cityValidationError = true; }
    $scope.tempSelectedCity = null;
    $scope.selectedCity = null;
  }

  $scope.addCity = function (city) {
    if (city && city.city && !$scope.checkCityExists(city)) {
      $scope.filter.selectedCities.push(city);
    }    
  }

$scope.addToCityFavs = function (index) {
  var city = $scope.filter.selectedCities[index];
  var exists = false;

  for (var i = 0; i < $scope.filter.favs.CityList.length; i++) {
    if ($scope.filter.favs.CityList[i].city.value == city.value) {
      exists = true;
    }
  }

 if (!exists) {
   $scope.savingCityFav = true;
   var fav = { id: 0, active: true, ruser_id: 0, city: city };

Do I need to add something to the HTML or JavaScript functions to get the ng-repeat list to update the $index value after a city has been added to the list?

I'll appreciate any help anyone can give.

share|improve this question
    
The only reference to $index is in ng-click="addToCityFavs($index);". And you say addToCityFavs is always called with 0? Maybe you have only one city per state. Please note that $index refers to city in value2, so you will have lots of cities with the same index anyway. – zeroflagL Jan 19 '15 at 18:51
    
First, thanks for the response. Unfortunately I know next to nothing about AngularJS. The person who built this just left the company, and I'm the support guy who has to fix this. If I understand what you're saying, because the items are being grouped by country then by state,the $index will be the ordinal value of the item within the group (state). Is there a way to get the ordinal value within the entire list? – Lou Valentine Jan 19 '15 at 19:38
    
That doesn't answer my question :) Where is $index 0? Or to put it differently: How do you know it's zero? – zeroflagL Jan 19 '15 at 19:42
    
The $index value is zero when the addCityToFavs function is called. In that function, it pulls the item from the selectedCities array that has the index number being passed in. Here's the function: – Lou Valentine Jan 19 '15 at 19:57
    
$scope.addToCityFavs = function (index) { var city = $scope.filter.selectedCities[index]; var exists = false; for (var i = 0; i < $scope.filter.favs.CityList.length; i++) { if ($scope.filter.favs.CityList[i].city.value == city.value) { exists = true; } } if (!exists) { $scope.savingCityFav = true; var fav = { id: 0, active: true, ruser_id: 0, city: city }; – Lou Valentine Jan 19 '15 at 19:58
up vote 1 down vote accepted

So it seems that the index is only needed to get the city from the array filter.selectedCities. But you don't need the index, because you can use the city directly:

ng-click="addToCityFavs(city);"

$scope.addToCityFavs = function (city) {
  //no longer needed -> var city = $scope.filter.selectedCities[index];
  var exists = false;
share|improve this answer
    
Thanks zeroflagL. That was exactly what I needed. – Lou Valentine Jan 19 '15 at 20:32
up vote 2 down vote

Try to add track by $index to ng-repeat. See this link for an example: https://egghead.io/lessons/angularjs-index-event-log

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.