ng-click inside ng-repeat doesnt work

Question

I have html which looks like one below, I have 2x ng-click in whole code in both situation I call same function. Both functions are in same controller.

          <div class="tagselect tagselect--frameless">
            <div class="combobox__body combobox__body--open combobox__body--frameless" ng-show="focus">
                <ul class="list-unstyled">
                    <li class="combobox__item" ng-repeat="pos in listCtrl.positions | filter:query as results"
                        ng-click="listCtrl.choosePosition(pos)">{{pos.name}}
                    </li>
                </ul>
            </div>
          </div>
          <div class="col-md-2 no-padding">
            <button type="button" class="btn btn-success" ng-click="listCtrl.chosenPositions(789456)">Add</button>
          </div>

controller looks like:

myApp.controller('ListCtrl', ['$scope', '$cookies', '$http', function ($scope, $cookies, $http) {

    var listCtrl = {
        candidates: [],
        positions: [],
        chosenPositions: [],

        init: function () {
            listCtrl.getCandidates();
            listCtrl.getPositions();
        },
        getCandidates: function () {
            $http.get('candidates.json').then(function (res) {
                listCtrl.candidates = res.data;
            });
        },
        getPositions: function () {
            $http.get('positions.json').then(function (res) {
                listCtrl.positions = res.data;
            });
        },
        choosePosition: function (position) {
           console.log(position);
        }

    };

    listCtrl.init();
    $scope.listCtrl = listCtrl;
}]);

I double check for missspells and make sure its not because of function (I create a new one with simple console log).

Problem is that button click correctly call function but ng-repeat <li ng-click=""> doesnt do anything. I read in angular documentation that ng-repeat create new scope but this should be still okey in my opinion as soon as I use reference to object listCtrlchoosePosition()

Can someone tell me what I am doing wrong? Thanks

EDIT: Plunker example: http://plnkr.co/edit/ooUQA2n1Vyj8RZtsQ1Pj?p=preview

It seems like the pos returned by ng repeat is an object, however, the call that works: listCtrl.chosenPositions(789456) is receibing a primitive, so I think you should do ng-click="listCtrl.choosePosition(pos.someProperty) in your ng-repeat — Arturo Montaño
– Arturo Montaño, Commented Jun 4, 2016 at 18:03
Hi @ArturoMontaño you will be right if that function will do anything but like it is right now it just console.log value it get (I cant know that , I am sorry for it). Also problem is that if I use breakpoint inside of function it didnt even get inside of the function — Andurit
– Andurit, Commented Jun 4, 2016 at 18:18

slackmart · Accepted Answer · 2016-06-04 20:46:55Z

2

ng-blur is doing something weird, so I'm going to suggest you to change the $scope.focus value from the ListCtrl instead of using the ng-blur.

html file

<!-- more html code -->
<!-- input without ng-blur directive -->
<input class="tagselect__input" placeholder="Position" ng-focus="focus=true" ng-model="query">
<!-- more html code -->
<li class="combobox__item" ng-repeat="pos in listCtrl.positions | filter:query as results" ng-click="listCtrl.choosePosition(pos)">{{pos.name}}
<!-- more html code -->

js file

// more code goes here.
choosePosition: function (position) {
  //alert('Going to choosen position');
  //$scope.query = position.name;
  $scope.focus = false; // Hide div options from here.
  // rest of your code.
},
// more code goes here.

Working in this plunkr

edited Jun 4, 2016 at 20:46

answered Jun 4, 2016 at 20:40

slackmart

4,9843 gold badges30 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

ng-click inside ng-repeat doesnt work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related