Angular Ng-repeat Dynamic

See this plunker In jQuery I can get the text of its td and put it in an alert but how can I make it in Angular? Should I make it an javascript native? This is the script var app =

Solution 1:

Just pass the value to the edit function as parameter,

<td><buttonng-click="edit(x)">edit</button></td>

and then function would be,

$scope.edit = function(x){
  console.log("Id is",x.id);
}

DEMO

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

app.controller('ctrl',function($scope){
  $scope.edit = function(){
    alert("ID = " + $scope.id + "\n NAME = " + $scope.name);
  };
  $scope.items = [
    {id:"1",name:"name 1"},
    {id:"2",name:"name 2"},
    {id:"3",name:"name 3"}
   ];
   
  $scope.edit = function(x){
   console.log("$$Id is",x.id);
  }
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><bodyng-controller="ctrl"ng-app="plunker"><table><thead><tr><th>id</th><th>name</th><th>edit</th></tr></thead><tbody><trng-repeat="x in items"><tdng-model="x.id">{{x.id}}</td><td>{{x.name}}</td><td><buttonng-click="edit(x)">edit</button></td></tr></tbody></table></body>

Solution 2:

Make your function edit() take a variable and then pass it in:

$scope.edit = function(obj){
  alert("ID = " + obj.id + "\n NAME = " + obj.name);
};

and then:

<td><buttonng-click="edit(x)">edit</button></td>

Solution 3:

You can create an array $scope.itemModel of size items.length in your controller and set the model in markup using $index on $scope.itemModel[$index] and then access the item by passing $index to the handler from your controller.