使用AngularJS隱藏/顯示特定元素

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> 

這裏是我的角碼（在CoffeeScript中）迄今：

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

我知道，最後一行是不正確，因爲它隱藏了所有的行而不是一個。我錯過了什麼？謝謝！

Answer 1

您需要將數據與多個isRowHidden值的陣列模式，然後通過NG-重複列出行：

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>