Question

我有一个页面显示所有评论（使用ng-repeat）。每条评论都有编辑按钮。这是我客户的要求。

点击编辑后，评论div应按表单进行交换。
在提交表单时，表单应由评论div替换。
每次只能更新一条评论。

因此，根据我的angularjs知识，我可以使用单一形式进行所有评论。但我对我应该怎么做感到困惑？ ng-swap，模板指令或其他。而且我也只有angularJS的基本知识，所以如果有人可以帮我演示/示例，我们将不胜感激。

修改

HTML

<div id="comment_{{$index}}" ng-repeat="comment in blog.comments track by $index">
    <div class="replace-with" ng-if="hideComment != $index">
        <h2>
            <b>comment</b> added by <b>{{comment.user.fullname}}</b>, <span><span>{{comment.datetime}}</span></span>
            <div>
                <a href="javascript:void(0)" ng-click="openEditForm($index, comment.unique_id)"><i class="fa fa-pencil"></i></a>
                <a href="javascript:void(0)"><i class="fa fa-trash-o"></i></a>
            </div>
        </h2>
        <p>{{comment.content}}</p>
    </div>
</div>

JS

$scope.hideComment = null;
$scope.openEditForm = function (div_id, id)
{
    $scope.hideComment = div_id;

    var html = '<form role="form" name="formUpdateComment" id="formUpdateComment">'
            + '<div class="box-body">'
            + '<div class="form-group">'
            + '<textarea ckeditor="editorOptions" id="taContent" name="taContent" rows="10" cols="80" ng-model="blog.blog_comments[' + div_id + '].content" ng-change="updateContent(' + div_id + ', \'edit\')"></textarea>'
            + '</div>'
            + '</div>'
            + '<div class="box-footer">'
            + '<div style="text-align: right;">'
            + '<button type="button" class="btn btn-primary" ng-click="closeEditForm(' + div_id + ')">Close</button>'
            + '</div>'
            + '</div>'
            + '</form>';

    $('#comment_' + div_id).append($compile(html)($scope));
}
$scope.closeEditForm = function (div_id)
{
    $('#comment_' + div_id + ' form').remove();
    $scope.hideComment = null;
}

在openEditForm()中，我想用表格更改/交换id为comment_ *的div的内容。点击ok按钮后，表单将替换为div内容（即<h2>，<p>等）。我没有加载更新数据等问题。我的痛苦是如何更改html内容。我不能这样走。因为在表单中添加更多输入会很头疼。所以我想使用angular指令。

Answer 1

尝试使用ng-if。

首先，在您的控制器中，定义以下变量，该变量将负责显示ckeditor：

$scope.showCkeditor = false;

然后，在编辑功能中，将其设置为True：

function edit(){
    ...
    $scope.showCkeditor = true;
}

然后，在你的HTML中，做这样的事情：

<ckeditor ng-if="showCkeditor">  // this is just an assumption as you did not show your own code


</ckeditor>

<commend-div ng-if="!showCkeditor">


</comment-div>

并对您的按钮执行相同操作

希望有所帮助

如何在angularjs中更改div的html？

1 个答案: