0

我有一个包含许多行的 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

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

4

1 回答 1

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>
于 2013-07-07T08:54:46.097 回答