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

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?

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?

• javascript
• twitter-bootstrap
• angularjs

Share Improve this question Follow asked Sep 10, 2013 at 6:38 Dan FDan F 12.1k33 gold badges5050 silver badges7474 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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,

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