I'm working on a table that uses ng-repeat on the <tr> element. In the last column of each row, I have edit/delete links that should only be visible when the user hovers over the <tr> element.
<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>
This is what my JS Controller looks like:
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){
$scope.selected_index = i;
}
Here's the CSS for displaying the hover edit links:
.edit_link_show{
display: inline;
}
.edit_link{
display: none;
}