I am attempting to display or hide buttons within an ng-repeat loop, specifically in a simple table. I want to replace a delete button with a confirm button.
Below is my code:
..... Angular stuff .....
function ContactsCtrl($scope, $http) {
$scope.order = '-id';
$scope.currentPage = 0;
$scope.pageSize = 15;
$http.get('/events/<%= @event.id -%>/contacts.json').success(function(data) {
$scope.contacts = data;
$scope.numberOfPages=function(){
return Math.ceil($scope.contacts.length/$scope.pageSize);
}
});
$scope.clickDelete = function(e,t) {
console.log("delete");
// rest api stuff...
$scope.contacts.splice(e, 1); // This WORKS!
};
$scope.showDelete = function(e,t) {
e.showDeleteButton = true; // This DOES NOT
};
}
In the HTML:
<tr ng-repeat="contact in contacts | filter:search | orderBy:order | startFrom:currentPage*pageSize | limitTo:pageSize">
<td><a href="/contacts/{{contact.id}}/edit">{{contact.email}}</a></td>
...
<td><a href="#" ng-click="showDelete(contact)" class="btn btn-small">delete</a>
<a href="/contacts/{{contact.id}}" ng-show="showDeleteButton" ng-click="clickDelete(contact)" class="btn btn-small btn-danger">confirm</a>
</td>
</tr>