angularjs 如何在指令中使用collapse？

nlejzf6q 于 2022-12-03 发布在 Angular

关注(0)|答案(1)|浏览(166)

我有这部分代码，其中第二个<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中的Cancel按钮时，<tr>应该消失。

angularjs

来源：https://stackoverflow.com/questions/27796866/how-to-use-collapse-in-a-directive

1条答案

按热度按时间

wyyhbhjk1#

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

赞(0）回复(0）举报 2022-12-03

我来回答

angularjs 如何在指令中使用collapse？

1条答案

相关问题

热门标签

最新问答