Showing Edit/Delete links when hover over the data row - css

Question

I have a table with ng-repeat on the <tr> at with the last td I have edit/delete links, I only want them to show if user hover over the <tr>
<tr ng-repeat="form in allData | filter:search | orderBy: orderByValue : orderIn" ng-click="set_index($index)">
<td><a ng-href={{form.link}}>{{form.ar_ref}}</a></td>
<td>{{form.title}}</td>
<td>{{form.category}}
<span ng-class="{'show_edit_link', $index==selected_index}">
<button ng-click="showUpdate()">Update</button>
<button ng-click="showDelete()">Delete</button>
</span>
</td>
</tr>
My JS Controller:
pp.controller('formsListCtrl', ['$scope', '$http', function($scope, $http){
$http.get('/php_user/formJSON.php').success(function(response){
$scope.allData=response;
//Show hover edit links
$scope.selected_index = 0;
$scope.set_index = function(i){ //i is the $index that we will pass in when hover in the forms_admin.php
$scope.selected_index = i;
}
CSS:
.edit_link_show{
display: inline;
}
.edit_link{
display: none;
}

Answer 1

There is a syntax error in your ng-controller. It should be a : for the expression after class name and you also want to set another ng-class argument for selected_index not equal to $index:
<tr ng-repeat="form in allData | filter:search | orderBy: orderByValue : orderIn" ng-click="set_index($index)">
<td><a ng-href={{form.link}}>{{form.ar_ref}}</a></td>
<td>{{form.title}}</td>
<td>{{form.category}}
<span ng-class="{'show_edit_link': $index==selected_index, 'edit_link': $index!=selected_index}">
<button ng-click="showUpdate()">Update</button>
<button ng-click="showDelete()">Delete</button>
</span>
</td>
</tr>