Access in a function to the scope of the clicked object in angular

Question

I have to access a function to the scope of the clicked object in angular. I have to write to the console the id of the object, but without passing the object to the called function by the click event.
Could some one help me with my problem?
Below is the code what I have achieved so far.

<ul data-ng-app="myApp" data-ng-controller="myController">
 <li data-ng-repeat="x in names" data-ng-bind="x.title" data-ng-click="fnct(x)"></li>
</ul>
<script>
angular.module('myApp', []).controller('myController', function($scope) {
 $scope.names = [{id: 2345, title: 'title1'}, {id: 9876, title: 'title2'}];
 $scope.fnct = function(obj) {
  console.log(obj.id);
 }
});
</script>

dfsq · Accepted Answer · 2015-10-17 10:44:56Z

1

You can use this keyword which will refer to current child scope so you don't have to pass x into function explicitly:

<ul data-ng-app="myApp" data-ng-controller="myController">
    <li data-ng-repeat="x in names" data-ng-bind="x.title" data-ng-click="fnct()"></li>
</ul>

Here is complete example:

angular.module('myApp', []).controller('myController', function($scope) {
    $scope.names = [{id: 2345, title: 'title1'}, {id: 9876, title: 'title2'}];
    $scope.fnct = function() {
        console.log(this.x.id);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>

<ul data-ng-app="myApp" data-ng-controller="myController">
    <li data-ng-repeat="x in names" data-ng-bind="x.title" data-ng-click="fnct()"></li>
</ul>

answered Oct 17, 2015 at 10:44

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

Laurianti Over a year ago

I did not think was accessible by "this". Thank you

Prabhas Nayak · Accepted Answer · 2015-10-17 10:43:51Z

0

Try

<ul data-ng-app="myApp" data-ng-controller="myController">
 <li data-ng-repeat="x in names" data-ng-bind="x.title" data-ng click="fnct(x.id)"></li>
</ul>
<script>
 angular.module('myApp', []).controller('myController', function($scope) {
  $scope.names = [{id: 2345, title: 'title1'}, {id: 9876, title: 'title2'}];
  $scope.fnct = function(id) {
   console.log(id);
  }
 });
</script>

answered Oct 17, 2015 at 10:43

Prabhas Nayak

2821 silver badge4 bronze badges

Collectives™ on Stack Overflow

Access in a function to the scope of the clicked object in angular

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