Angular ng-click not working in ng-repeat

Question

I'm trying to save an array element in another variable using ng-click in ng-repeat, but when I click the element, it doesn't work.

This is my Code:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="myCtrl">
  <div ng-repeat="img in images">
    <a ng-click="showing = img">{{img.descricao}}</a>
  </div>

  --------------------
  Clicked element description is: {{showing.descricao}}
</body>
</html>

This is my javascript:

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
      $scope.images = [
        {
            "id": 1,
            "image": "http://placehold.it/300x300",
            "ordem": 1,
            "descricao": "Descricao 1"
        },
        {
            "id": 2,
            "image": "http://placehold.it/300x300",
            "ordem": 2,
            "descricao": "Descricao 2"
        }
    ];

  $scope.showing = {};
});

There is my complete code: http://jsbin.com/fuyuci/1/edit

Where I was wrong?

Is working! thank you so much, but why can I set 'showing' variable direct, without function? — Lai32290, Mar 15 '15 at 13:26
`ngRepeat` create own scope, so when you assign variable - it assign to ngRepeat scope, also yet another way for solving use [`$parent`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$parent) like `$parent.showing = img` — Grundy, Mar 15 '15 at 13:26
So can I access my controller variable in ngRepeat, but can't set your value direct? — Lai32290, Mar 15 '15 at 13:29
Refer this post: http://stackoverflow.com/questions/15623698/directive-isolate-scope-with-ng-repeat-scope . It will clear your doubts — K K, Mar 15 '15 at 13:30

score 3 · Accepted Answer · answered Mar 15 '15 at 16:07

3

I think that you're using not correctly when changing value of showing in ng-repeat because ng-repeat create own scope. In stead of that, you should bind an function to set value for $scope.showing. for example:


    $scope.changeShowing = function(img) {
        `$scope.showing = img;`
    };

ng-click ="changeShowing(img)"'

answered Mar 15 '15 at 16:07

NguaCon

124
9

rly helpfull ;) didn't know that ng-repeat creats there own scope – Eriks Sep 12 '17 at 14:54

Angular ng-click not working in ng-repeat

1 Answers1