如何在指令中使用折叠？

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;

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

Answer 1

View in 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;
        }

如何在指令中使用折叠？

How to use collapse in a directive?

collapse

twitter-bootstrap

angularjs

angularjs-directive