Question

我有一个包含许多行的HTML表格，并希望在用户点击该特定行的删除按钮时隐藏一行。我在使用Angular和ng-hide指令时遇到了麻烦。

这是我的（简化）HTML代码，只有两行：

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

到目前为止，这是我的Angular代码（在CoffeeScript中）：

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

我知道最后一行不正确，因为它隐藏了所有行而不是一行。我错过了什么？谢谢！

Answer 1

您需要将数据建模为具有多个isRowHidden值的数组，然后通过ng-repeat列出行：

http://jsfiddle.net/XqchD/（使用JS，而不是咖啡）

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>

使用AngularJS单击时隐藏/显示特定元素

1 个答案: