CODEWITHSUNDEEP
angularjs
Chuck
Chuck

Reputation: 656

How to bring data back from model to controller

I have an array of objects... for a concrete example, let's call the array People, where each person has a uniqueID, a name and a tagline.

I'm using the foreach templating to display a list of these people, like so:

<ul>
    <li ng-repeat="person in People">
        {{person.name}}: {{person.tagline}}
        ...

Simple enough to take the data from the controller and sync it into the model.

Now, I want to click on a person and do something complicated with their information. Like so:

<ul ng-controller="myCtrl">
    <li ng-repeat="person in People" ng-click="clickHandler($event)">
        ...

Right now, I have access to the DOM element like this:

$scope.clickHandler = function($event) {
    var domElement = $event.currentTarget;
        ...

But, how do I get the data from the relevant person object (the one that was clicked on), so that I can possibly look at their uniqueID (which is not stored in the DOM)?

Upvotes: 2

Views: 931

Answers (3)

Ganesh Thorat
Ganesh Thorat

Reputation: 592

Instead of passing $event you can pass person object directly to function and then you can perform any complex operation there. e.g

 <li ng-repeat="person in People" ng-click="clickHandler(person)">
           Name: {{person.name}}, Tagline: {{person.tagline}},  Id:  {{person.uniqueId}}
  </li>

Working Example: 

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

(function() {
    "use strict";
    myApp.controller("myCtrl", function($scope) {
        $scope.People = [{
                "name": "Sam",
                "tagline": "Sam Test",
                "uniqueId": 123

            },
            {
                "name": "Dominik",
                "tagline": "Dominik Test",
                "uniqueId": 100

            },
            {
                "name": "Chris",
                "tagline": "Chris Test",
                "uniqueId": 555

            }
        ];

        $scope.clickHandler = function(person) {
            console.log(person);
            // You can perform any complex operation here as you have access to person here. 
        }
    });
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl as ctrl">
   <li ng-repeat="person in People" ng-click="clickHandler(person)">
       Name: {{person.name}}, Tagline: {{person.tagline}},  Id:  {{person.uniqueId}}
     </li>
  </div>
</div>

Upvotes: 0

Ganaraj
Ganaraj

Reputation: 26841

Whenever you use ng-repeat you should remember that it creates a new scope. This scope inherits from the parent scope. But for each item in ng-repeat a new scope is created.

In order to access this scope you will also have to introduce a controller which will work along with that scope. So you would have to do 

 <li ng-repeat="person in People" ng-click="clickHandler($event)" ng-controller="PersonController">
 ...

In your javascript 

function PersonController($scope){
  //In here you will be able to access the person from "person in People"

  $scope.clickHandler = function($event){
    console.log($scope.person);    
  }
}

It is this scope that will have the person variable. Now, you could also declare a clickHandler here.

You should note that for each person in People a new scope will be created as well as a new Controller (PersonController ). And in your person controller you will be able to access and manipulate your person to your hearts content.

Upvotes: 3

Renan Tomal Fernandes
Renan Tomal Fernandes

Reputation: 10978

Try defining $scope.clickHandler on a parent controller and ng-click="clickHandler(person)", with this you will use the parent scope and don't need to instancie one controller for each row

Upvotes: 6

Related Questions