I have an array of objects that i am iterating over with an ng-repeat, and inside of that is an ng-click that sends the object from the array and sends it back to some random function in the backing controller like so:
PLUNKERR: http://plnkr.co/edit/Chvx59rRhGFwX2ImHQva
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Profile Screen</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
<link href="http://code.ionicframework.com/1.0.0-rc.1/css/ionic.min.css" rel="stylesheet">
<link href="http://code.ionicframework.com/1.0.0-rc.1/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-rc.1/js/ionic.bundle.js" ></script>
<script src="http://code.ionicframework.com/1.0.0-rc.1/js/angular-ui/angular-ui-router.js" ></script>
<script>
angular.module('controllers', []);
angular.module('application', ['ionic', 'controllers','ui.router'])
.controller('ProfileCtrl',function($scope,$ionicModal) {
$scope.editMode = false;
$scope.person = { aliases : [] };
$scope.person.aliases.push({ firstName: 'Dave', lastName: 'Smith'});
$scope.person.aliases.push({ firstName: 'Davey', lastName: 'Smith'});
$scope.person.aliases.push({ firstName: 'David', lastName: 'Smith'});
$scope.startStopEditProfile = function(status){
$scope.editMode = status;
}
$scope.deleteEntry = function(type,entity) {
console.log(type,entity);
alert("deleting "+ entity.firstName);
}
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('profile',{
url: "/profile",
templateUrl: "profile.html",
controller: "ProfileCtrl",
})
$urlRouterProvider.otherwise('/profile');
});
</script>
<script type="text/ng-template" id="profile.html">
<ion-view>
<div class="bar bar-header">
<div class="h1 title">My Profile</div>
<button class="button button-stable asdf-done-button" ng-click="editMode = !editMode">{{editMode ? 'Done' : 'Edit'}}</button>
</div>
<ion-content style="background: #EBEBEB" class="has-header" has-bouncing="true">
<div id="profileSection">
<ion-item ng-class="editMode ? 'asdf-profile-row-edit' : 'asdf-profile-row-view'">
<div class="asdf-table-row-right">
<label>
<div ng-if="editMode" ng-repeat="alias in person.aliases track by $index">
<span>
{{$index}} - {{alias.firstName + ' ' + alias.lastName}}
<button ng-click="deleteEntry('alias',alias)" >X</button>
</span>
</div>
<p ng-if="!editMode" ng-repeat="alias in person.aliases">
{{alias.firstName + ' ' + alias.lastName}}
</p>
</label>
</div>
</ion-item>
</div>
</ion-content>
</ion-view>
</script>
</head>
<body ng-app="application">
<ion-nav-view>
</ion-nav-view>
</body>
</html>
click edit in the top right, "X"'s show up next to the names. every time you click any "X" button, it clicks the first one and the one you actually click... its quick but you can see it if you watch it...
sorry for the externals, i slimmed it down as best as i could...
Thanks again..
I just copy your code and it work.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='controllers.js'></script>
<script src='app.js'></script>
</head>
<body ng-app="App" ng-controller="Controller">
<table>
<thead>
<tr><th colspan="2">Title</th></tr>
</thead>
<tbody>
<tr ng-repeat="obj in objectArray">
<td>{{$index + 1}}</td>
<td ng-click="onClick(obj)">
{{obj.name}}
</td>
</tr>
</tbody>
</table>
</body>
</html>
controllers.js
angular.module('App.controllers', [])
.controller('Controller', function($scope) {
$scope.objectArray = [
{'name':'apple'},
{'name':'orange'},
{'name':'pear'},
{'name':'naartjie'}
];
$scope.onClick = function(obj){
console.log(obj);
};
})
app.js
angular.module('App', ['App.controllers']);
Code plunker http://embed.plnkr.co/rbcH47/preview
Here you are passing an object . But you can get the whole properties inside your click event .
angular.module('MyApp',[]);
function PostCtrl($scope) {
$scope.objectArray = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
];
$scope.onClick = function(obj){
console.log(obj);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="PostCtrl">
<table>
<thead>
<tr><th colspan="2">Title</th></tr>
</thead>
<tbody>
<tr ng-repeat="obj in objectArray">
<td>{{$index + 1}}</td>
<td ng-click="onClick(obj)">
{{obj.name}}
</td>
</tr>
</tbody>
</table>
</div>
</div>