Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have an HTML table with many rows in it and want to hide a row when the user clicks the delete button for that particular row. I'm having trouble doing it with Angular and the ng-hide directive.

Here's my (simplified) HTML code for just two rows:

   <tr ng-hide="isRowHidden">
     <td>Example template title</td>
     <td>
       <a href="#" ng-click="deleteTemplate(@template.id)">Delete template</a>
     </td>
   </tr>
   <tr ng-hide="isRowHidden">
     <td>Another example template title</td>
     <td>
       <a href="#" ng-click="deleteTemplate(@template.id)">Delete template</a>
     </td>
   </tr>

And here is my Angular code (in CoffeeScript) thus far:

 $scope.deleteTemplate = (templateId) ->
    console.log "Deleting template id #{templateId}" 
    $scope.isRowHidden = true

I know that the last line is incorrect because it hides all rows instead of just one. What am I missing? Thanks!

share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

You need to model the data as an array with multiple isRowHidden values, then list the rows via ng-repeat:

http://jsfiddle.net/XqchD/ (uses JS, not coffee)

myApp = angular.module("myApp", [])

FieldCtrl = ($scope) ->
  $scope.data = fields: [
    value: "1F"
    isRowHidden: false
  ,
    value: "2F"
    isRowHidden: false
  ]
  $scope.deleteTemplate = (field) ->
    console.log field
    field.isRowHidden = true

HTML:

 <table ng-repeat="field in data.fields">
   <tr ng-hide="field.isRowHidden">
     <td>{{field.value}}</td>
     <td>
       <a href="#" href="#" ng-click="deleteTemplate(field)">Delete template</a>
     </td>
   </tr>
 </table>
share|improve this answer
 
What would this look like in the controller? –  jetcom Jul 7 at 9:47
 
Updated answer, hope it clarifies –  7zark7 Jul 7 at 18:09
 
Great, works well, thanks! –  jetcom Jul 9 at 2:33
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.