AngularJS, UI Bootstrap DropDown Toggle, ng-click not firing if arguments are bound

Question

Darndest problem, and I'm not sure where it lies. (All variable names below insanitized to protect the guilty)

If I have an ng-click on an ng-repeated item inside a ui bootstrap dropdown toggle that uses a bound property, the ng-click doesn't fire.

Here I'm trying to pass the items Code property to a function.

<div class="btn-group">
    <a class="btn btn-inverse dropdown-toggle" >Copy to <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li ng-repeat="jigger in Thingies">
            <a ng-click="cloneItemTo('{{jigger.Code}}');">{{jigger.Name}}</a>
        </li>
    </ul>
</div>

If however I have an ng-click that uses a hardcoded value, the ng-click fires. Here I'm hardcoding the 'xxx' in place of where I'd like the items Code property used.

<div class="btn-group">
    <a class="btn btn-inverse dropdown-toggle" >Copy to <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li ng-repeat="jigger in Thingies">
            <a ng-click="cloneItemTo('xxx');">{{jigger.Name}}</a>
        </li>
    </ul>
</div>

Here's the interesting bit of the controller

$scope.Thingies = [
   {"ID": 1,"Code": "itemone",    "Name": "Item One"}
  ,{"ID": 2,"Code": "itemtwo",    "Name": "Item Two"}
  ,{"ID": 3,"Code": "itemthree",  "Name": "Item Three"}
  ,{"ID": 5,"Code": "whereisfour","Name": "Item Five"}
];

$scope.cloningto = 'nowhere';

$scope.cloneItemTo = function(newType) {
    $scope.cloningto = newType;
}

I've stripped everything back to bare bones and created a Plunkr and the problem still persists.

Anyone know what I'm doing wrong, or any workarounds?

Maxim Shoustin · Accepted Answer · 2013-09-10 06:47:51Z

3

Change line:

<a ng-click="cloneItemTo('{{jigger.Code}}');">{{jigger.Name}}</a>

to:

<a ng-click="cloneItemTo(jigger.Code);">{{jigger.Name}}</a></li>

Hope it will help,

answered Sep 10, 2013 at 6:47

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

Comments

enriquecastl · Accepted Answer · 2013-09-10 06:51:52Z

2

Replace this cloneItemTo('{{jigger.Code}}'); with this cloneItemTo(jigger.Code); it worked for me in your Plunkr

answered Sep 10, 2013 at 6:51

enriquecastl

8405 silver badges10 bronze badges

1 Comment

Dan F Over a year ago

Man, there's half a day I'll never get back. Thanks!

Collectives™ on Stack Overflow

AngularJS, UI Bootstrap DropDown Toggle, ng-click not firing if arguments are bound

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related