angularjs ng-click function parameter not working with ng-repeat

Question

The event.id is rendered/compiled correctly in the html text but the function does not recieve it correctly. even when it shows it correctly in the source, whats going on here?

<span ng-repeat="event in [{"id":"dxczhlyvmblc","name":"4 on 4 - Pickup","venuename":"Box Hill Aqualink","numspotsleft":"<strong>Spots now open<\/strong>","day":"28","dayname":"Wednesday"}]">
    <button ng-click="toggleModal('<% event.id %>')">More detail = <% event.id %></button>
</span>

shopApp.controller('MainController', function($scope, $http, $q){
    $scope.toggleModal = function(eventId){
        console.log(eventId+" toggle");
    };})

Note i am using <% in stead of {{ because of the templating engine.

charlietfl · Accepted Answer · 2015-10-17 00:25:46Z

2

Arguments for functions in view don't use angular templating expressions.

Change to:

ng-click="toggleModal(event.id)"

You may also find it more convenient to pass the whole object in if you want to pass that object to a modal controller for example

answered Oct 17, 2015 at 0:25

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

1 Comment

Michel Over a year ago

Excellent, was looking for this!!

Michel · Accepted Answer · 2015-10-17 00:26:10Z

1

As you want to pass the value of event.id to the toggleModal function:

<button ng-click="toggleModal(event.id)">More detail = <% event.id %></button>

answered Oct 17, 2015 at 0:26

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Collectives™ on Stack Overflow

angularjs ng-click function parameter not working with ng-repeat

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related