How to trigger click in ng-repeat in angular js?

Question

I want to trigger an event click handler in angular (click the button and trigger also the span). I tried to use nth-child selector but still no results. Any suggestions ? I tried also with jQuery selector ...

JsFiddle

<div ng-app="app" ng-controller="MainCtrl">
  <h3 ng-bind="version"></h3>
  <div id="wrapper">
   <ul>
    <li ng-repeat="item in items">
      <button ng-click="forceClick(item,$index)">Click</button>
      <span ng-bind='item.name' ng-click='showMsg(item.name)'></span>
    </li>
   </ul>
 </div>
</div>


angular.module('app',[])
.controller('MainCtrl', function($scope,$timeout){
$scope.version = 'Angular 1.4.8';
$scope.items = [];
$scope.showMsg = showMsg;
$scope.forceClick = forceClick;

init();

function forceClick(item, index){
 $timeout(function(){
    angular.element('#wrapper ul li:eq(' + index + ')  span').triggerHandler('click');
 },3000);
}

function showMsg(itemName){
  alert("Clicked on " + itemName);
};

function init(){
 for(var i=0;i<10;i++){
    $scope.items.push({
    name:'item ' + i,
    selected:false
  });
  }
 }
});

Sparw · Accepted Answer · 2016-06-03 13:43:11Z

1

Try with this controller :)

   angular.module('app', []).controller('MainCtrl', function($scope, $timeout) {
        $scope.version = 'Angular 1.4.8';
        $scope.items = [];
        $scope.showMsg = showMsg;
        $scope.forceClick = forceClick;

        init();

        $scope.showMsg = function(itemName) {
            alert("Clicked on " + itemName);
        };
        $scope.forceClick = function(item, index) {
            console.log('I clicked !!');
        };

        function init() {
            for (var i = 0; i < 10; i++) {
                $scope.items.push({
                    name:'item ' + i,
                    selected:false
                });
            }
        }
    }
);

edited Jun 3, 2016 at 13:43

answered Jun 3, 2016 at 13:37

Sparw

2,7531 gold badge18 silver badges35 bronze badges

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

1 Comment

que1326 Over a year ago

I have it top : $scope.forceClick = forceClick;

Andreas Louv · Accepted Answer · 2016-06-03 13:50:34Z

1

try to inject $scope in the controller

.controller('MainCtrl', '$scope', function($scope, $timeout) {

Any examples?

edited Jun 3, 2016 at 13:50

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

answered Jun 3, 2016 at 13:40

aCo

714 bronze badges

1 Comment

que1326 Over a year ago

that is not valid, you define the controller in 2 most-used ways, .controller('name',['$scope',function($scope){ //code }]) with the purpose of resolving minification conflicts, or .controller('name',ctrlName); ctrlName.$inject = ['$scope']; function ctrlName($scope){ //code } ; If the "$scope" hasn't been injected, my binding wouldn't bind / work also :P

Collectives™ on Stack Overflow

How to trigger click in ng-repeat in angular js?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related