Show/hide a button inside ng-repeat

Question

I am trying to show/hide buttons on a ng-repeat (a simple table). A delete button replaced by a conform button.

Here 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
    };
}

And in 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>

Answer 1

You don't appear to be returning a value from the showDelete function. It also looks like there is a property on the JSON object 'showDeleteButton' which you could bind to directly.

Example plnkr: http://plnkr.co/edit/eZTFyw9tGeWEfYw0U0I8

Answer 2

This is how I did it:

JavaScript:

$scope.clickDelete = function(contact,i) {/* ... */ $scope.contacts.splice(i, 1);};
$scope.clickShowConfirm = function(contact) {contact.showdelete = true;};
$scope.clickCancel = function(contact) {contact.showdelete = false;}
$scope.showOrHide = function(contact) {return contact.showdelete;};

HTML:

<a href="#" ng-click="clickShowConfirm(contact)" ng-hide="showOrHide(contact)" class="btn btn-small">delete</a>
<a href="/contacts/{{contact.id}}" ng-click="clickDelete(contact,$index)" class="btn btn-small btn-danger" ng-show="showOrHide(contact)">ok</a>
<a href="#" ng-show="showOrHide(contact)" ng-click="clickCancel(contact)" class="btn btn-small">cancel</a>

Answer 3

It seems like what you are trying to do is have the delete button just set a flag that will show the confirm button which will actually perform the delete, correct? ng-repeat creates a new child scope for each element, so you could just set a 'confirmable' flag on the child scope and use that ( fiddle ):

<a ng-click="confirmable = true">delete</a>
<a ng-show="confirmable" ng-click="clickDelete(contact)">confirm</a>
<a ng-show="confirmable" ng-click="confirmable = false">cancel</a>

Also it looks like you're passing the contact object to your clickDelete function and using it as an index into the array so I don't know why that works. The fiddle uses indexOf to find the index to delete.