如何在指令中使用折叠

Question

我有这部分代码，其中第二个<tr>仅在编辑单击时出现，并且出现一个我正在使用指令显示的表单。

 <table class="table">
            <tbody ng-repeat="Emp in Employees">
                <tr>
                    ...
                    <td>
                        <input type="button" class="btn btn-default" value="Edit" ng-click="isCollapsed = !isCollapsed" />
                   </td>
                </tr>
                <tr collapse="isCollapsed">
                    <td>
                        <div>
                            <employee-form></employee-form>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

现在我的 employeeForm 指令中也有一个按钮，单击该按钮时应该会使此表单消失（isCollapsed=true）。但不知何故，这是行不通的。

员工表单的标记：

<form>
    ...
    <button type="button" class="btn btn-default" value="Cancel" ng-click="isCollapsed = true" />
</form>

JS部分是：

$scope.isCollapsed = true;

所以我想要的是单击员工中的取消按钮表单<tr>应该消失。

Answer 1

在 Plunker 中查看

我希望它可以帮助您：...HTML：

<div ng-app="myapp" ng-controller="myctrl" id="id01">
<table>
    <tbody ng-repeat="emp in Employees">
    <tr>
        <td>
            <p>{{emp}}<input type="button" value="edit" ng-click="setshowindex($index)"/></p>
        </td>
    </tr>
    <tr ng-class="{'show':$index==showing,'hide':$index!==showing}">
        <td>
            <employee-form></employee-form>
        </td>
    </tr>
    </tbody>
</table>

脚本：

angular.module('myapp',[])
        .controller('myctrl',function($scope){
            //$scope.collapsed = true;
            $scope.Employees = ['abc','xyz','klm'];
            $scope.showing = -1;
            $scope.setshowindex = function (i) {
                $scope.showing = -1;
                $scope.showing = i;
            };
        })
        .directive('employeeForm',function(){
            return {
                restrict: 'E',
                replace:true,
                template: '<form><input type="text" ng-value="emp" /><button ng-click="setshowindex(-1)">Cancel</button></form>'
            };
        });

.CSS：

tr.show{
            display: table-row;
        }
tr.hide{
            display: none;
        }