ng-click fired multiple times inside ng-repeat

Question

I have an issue with my ionic/angularjs app that it is firing my ng-click 4 times when initiated from within ng-repeat. It returns the correct result the first time followed by 3 undefined values that is causing all sorts of issues. I have read some other postings on these types of errors but I am unable to resolve myself.

Here is the offending ng-repeat loop:

  <ion-item class="item-accordion"
                        ng-repeat="item_type in item.subcategories"
                        ng-show="isGroupShown(item)"
                        ng-click="onSelectItems(item_type)">

                {{item_type.name}}
              </ion-item>

It is an accordion layout based off a JSON file and correctly gives me the correct item names in the list.

This is the onSelectItems function that exists inside the controller:

$scope.onSelectItems = function(item_type) {

        var params = item_type.name;

        $state.go('tab.itemDetail', params);

        itemService.getItemDetails(item_type);


};

Here is the itemService:

getItemDetails: function(details) {

      var name = details.name;

      console.log(name);

      return name;

    }

Finally, here is the controller where I want to display the item name (master/detail):

.controller("itemListingDetailCtrl", function ($scope, itemService, $stateParams, $state)
{
  console.log(itemService.getItemDetails(name));

  $scope.name = itemService.getItemDetails(name);


})     

When I click on a item type_type in the HTML however (in Ripple under Chrome), in developer tools, I see that it gives me the correct name followed by the 3 undefined values and the following error in developer tools.

Cannot read property 'name' of undefined
    at Object.getItemDetails 

Any ideas of what I can try?

Thanks in advance.

Answer 1

In the following code :

.controller("itemListingDetailCtrl", function ($scope, itemService, $stateParams, $state)
{
  console.log(itemService.getItemDetails(name));

  $scope.name = itemService.getItemDetails(name);


});

name does not exists. maybe your refere to $stateParams.name (depending on your ui-routing definition, see official doc here : https://github.com/angular-ui/ui-router/wiki/URL-Routing

A basic example of your routing shall be :

$stateProvider
    .state('item.detail', {
        url: "/item/:name",
        templateUrl: 'item.detail.html',
        controller: itemListingDetailCtrl
    })

Therefore, your function call itemService.getItemDetails(name) is passing an undefined value.

Into the function, you initiate name like that :

 var name = details.name;

Where (see above) details = undefined.

Correct your controller with a parameter value shall do the trick (if you pass your parameter well and routing well configured)

$scope.name = $stateParams.name

Answer 2

I think this is what you want http://forum.ionicframework.com/t/accordion-list/2832 so basically you need to do ng-repeat outside of ion-item. Check the HTML tab to see how they assigned ng-click to each ion-item.

EDIT: I'm thinking it should look like this.

<div ng-repeat="item_type in item.subcategories">
  <ion-item class="item-accordion"
                 ng-show="isGroupShown(item)"
                 ng-click="onSelectItems(item_type)">

    {{item_type.name}}
  </ion-item>
</div>