ng-click with ng-repeat not working with direct expressions (not functions)

Question

I am having an ng-repeat block and with it i am writing an ng-click with a direct expression of setting a $scope variable to true.. but it doesn't work.. can someone plz help.. here is the plnkr

HTML:

selected: {{selected}}
    <ul>
      <li ng-repeat="t in t.header" ng-click="selected = true;">{{t.a1}}</li>
    </ul>

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.selected = false;
  $scope.t = {
    header: [
      {
        a1:'a1'
      },
      {
        a1:'a1'
      }
    ]
  }
});

for now i am having a workaround to have a function call on its click and set the variable that is required, but curious to know whats wrong with the other approach?

there should be something like a $parent.selected, only selected doesn't make any sense — argentum47
– argentum47, Commented Apr 1, 2015 at 8:09

squiroid · Accepted Answer · 2015-04-01 08:07:53Z

4

Use $parent because ng-repeat creates it's own scope

<li ng-repeat="t in t.header" ng-click="$parent.selected = true;">{{t.a1}}</li>

Plunker

answered Apr 1, 2015 at 8:07

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

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

1 Comment

narcs Over a year ago

$parent did the trick, marking this as answer as it is close match to my prob.. other solutions provided works as well.. thanks everyone..

eladcon · Accepted Answer · 2015-04-01 08:09:23Z

2

It's working, but because of the ngRepeat, selected is binded to the new scope. You can instead put selected in an object, so it won't create a new selected property on the child scope:

<li ng-repeat="t in t.header" ng-click="selectedObj.selected = true;">{{t.a1}}

$scope.selectedObj = { selected: false };

Check this plunker.

answered Apr 1, 2015 at 8:09

eladcon

5,8251 gold badge18 silver badges19 bronze badges

Comments

huan feng · Accepted Answer · 2015-04-01 08:09:51Z

0

Try this:

//$scope.selected = false;
  $scope.model = {};
  $scope.model.selected = false;

plnkr

What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works.

For better understanding: https://github.com/angular/angular.js/wiki/Understanding-Scopes

answered Apr 1, 2015 at 8:09

huan feng

8,6943 gold badges40 silver badges66 bronze badges

Comments

zhekaus · Accepted Answer · 2015-04-01 08:11:18Z

0

Just use $parent scope, like this:

<li ng-repeat="t in t.header" ng-click="$parent.selected = true;">

Every item in ng-repat has his own scope.

answered Apr 1, 2015 at 8:11

zhekaus

3,1946 gold badges26 silver badges50 bronze badges

Collectives™ on Stack Overflow

ng-click with ng-repeat not working with direct expressions (not functions)

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related