Question

Picture Demo

Hi guys!Having this issue with Angular JS,which is bugging me for a while now,so decided to get some help,have in mind I'm new to Angular,so be gentle:).I want to make a simple Angular JS Comment / Reply section.I did it and it's working,but not the way I want it to.I want the reply section to post the replies above its container,not below it.I want when posting a reply for it to appear above the reply text area,but below the comment that has been posted.How can this be done,your help will be very much appreciated?Here's the code I wrote:

HTML:

            <div id='dv1'>
            <form ng-controller="FrmController">
                <form ng-controller="FrmController">
                    <textarea ng-model="txtcomment" placeholder="Comment..." style='width:510px'></textarea>
                    <button ng-click='btn_add();' id="commentBtn" style='margin-top:5px;'>Post Comment</button>
                    <ul>
                        <textarea ng-repeat="comnt in comment" style='width:510px'> Comment: {{ comnt }} </textarea>
                    </ul>
                </form>
            </form>
        </div>
        <div id='dv2'>
            <form ng-controller="FrmController2">
                <form ng-controller="FrmController2">
                    <textarea ng-model="txtcomment2" placeholder="Reply..." style='width:510px'></textarea>
                    <button ng-click='btn_add();' id="replyBtn" style='margin-top:5px;'>Reply</button>
                    <ul>
                        <textarea ng-repeat="comnt in comment" style='width:510px'> Reply: {{ comnt }} </textarea>
                    </ul>
                </form>
            </form>
        </div>

And the JS function for the comment section:

function FrmController($scope) {
$scope.comment = [];
$scope.btn_add = function () {
    if ($scope.txtcomment != '') {
        $scope.comment.push($scope.txtcomment);
        $scope.txtcomment = "";
    }
}
$scope.remItem = function ($index) {
    $scope.comment.splice($index, 1);
}

}

And the same JS function for the reply section:

function FrmController2($scope) {
$scope.comment = [];
$scope.btn_add = function () {
    if ($scope.txtcomment2 != '') {
        $scope.comment.push($scope.txtcomment2);
        $scope.txtcomment2 = "";
    }
}
$scope.remItem = function ($index) {
    $scope.comment.splice($index, 1);
}

}

Also can someone show me how to add an image avatar for each section(comment and reply),also date and time,thanks in advance!

Answer 1

如果我正确阅读此内容，您将要使用此功能：

<textarea ng-repeat="comnt in comment | orderBy: $index : true" style='width:510px'> Reply: {{ comnt }} </textarea>

这会颠倒回复的顺序，所以最新的回复应该显示在最上面。

编辑：我认为这就是你的意思：

    <div id='dv2'>
        <form ng-controller="FrmController2">
            <form ng-controller="FrmController2">
                <ul>
                    <textarea ng-repeat="comnt in comment" style='width:510px'> Reply: {{ comnt }} </textarea>
                </ul>
                <textarea ng-model="txtcomment2" placeholder="Reply..." style='width:510px'></textarea>
                <button ng-click='btn_add();' id="replyBtn" style='margin-top:5px;'>Reply</button>
            </form>
        </form>
    </div>

EDIT2回答您的后续问题。我认为这将起作用：

JS：

$scope.btn_add = function () {
    if ($scope.txtcomment2 != '') {
        var dateTime = new Date();
        $scope.comment.push({comment : $scope.txtcomment2, date : dateTime);
        $scope.dt.push(dateTime);
        $scope.txtcomment2 = "";
    }
}

HTML：

<textarea ng-repeat="comnt in comment" style='width:510px'> Reply: {{comnt.date}} {{ comnt.comment }} </textarea>

Angular JS Comment / Reply Query

1 个答案: