1

my index page is here

<div ng-app="CommentApp" ng-controller="MyController">
    <div class=" col-md-12">
        <div class="alert alert-info"><h2 class="text-center">Comment App</h2></div>
        <div id="CommentList" class="container col-md-7" scroll="Comments" style="height:650px; overflow:scroll">
            <div class="row" style="border:0px solid;padding:20px;" ng-repeat="Comment in Comments | orderBy:'LastUpdateTime'">
                <div class="well well-sm row">
                    <div class="col-md-8">
                        **<h3><text style="color:mediumpurple;" e-form="rowform" data-ng-model="UpdateCommentText" editable-text="Comment.CommentText">{{Comment.CommentText || 'Empty'}}</text></h3>**
                    </div>
                    <div class="col-md-4 pull-right" style="margin-top:17px">
                        <div class="buttons pull-right">
                            <form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline">
                                <button type="submit" ng-disabled="rowform.$waiting" ng-click="EditComment()" class="btn btn-primary">
                                    Save
                                </button>
                                <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
                                    Cancel
                                </button>
                            </form>
                        </div>
                        <div class="buttons pull-right" ng-show="!rowform.$visible">
                            <button class="btn btn-primary" ng-click="rowform.$show()">Edit</button>
                            <button class="btn btn-danger" ng-click="RemoveComment(Comment)">Delete</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 row" style="margin-bottom:10px" ng-repeat="img in Comment.Images">
                    <img style="margin-bottom:15px" src="{{img}}" />
                </div>
                <h2 class="pull-right" style="color:green;font-size:15px; margin-right:20px">By User {{Comment.Id}}</h2>
                <h2 class="pull-right" style="color: darkviolet; font-size: 15px; margin-right: 20px">{{Comment.LastUpdateTime.slice(6,-2) | date: 'hh:mm a dd-MMM-yyyy' }}</h2>
                <div class="clearfix">&nbsp;</div>
                <hr />
            </div>
        </div>
    </div>

    <div class="col-sm-10" style="font-size:17px">

        <form novalidate name="f1" ng-submit="AddComment()">
            <div style="color: red">{{Message}}</div>

            <div class="col-sm-1">
                <div class="glyphicon glyphicon-plus" style="height: 50px;border:1px solid; width: 50px; cursor:pointer;" onclick="getFile()">
                    <div style="height: 0px;width:0px; overflow:hidden;">
                        <input id="filesel" type="file" name="file" accept="image/*" onchange="angular.element(this).scope().selectFileforUpload(this.files)" required multiple />
                    </div>
                </div>

                <span class="error">{{FileInvalidMessage}}</span>
            </div>

            <div class="col-sm-6 pull-left">
                <input type="text" placeholder="Enter Your Comment Here" style="height: 50px;font-size:30px;width:500px" name=" ufiledescription" ng-model="CommentText" class="{{(IsFormSubmitted?'ng-dirty' + (f1.uFileDescription.$invalid?' ng-invalid':''):'')}}" autofocus />

            </div>
            <div class="col-sm-3 pull-left">
                <input class="btn btn-primary" style="height:50px;width:100px" value="Send" id="Submit" type="submit" />
            </div>


        </form>
    </div>

</div>

my angular controller

app.controller("MyController", function ($scope, MyServices,$http) {

// Get All Comments
GetAllComments();
function GetAllComments() {
    var getData = MyServices.getComments();

    getData.then(function (cmnt) {
        $scope.Comments = cmnt.data;
    },

    function () {
        alert('Error in getting Comments');
    });
};

// Add New Comment
$scope.AddComment = function () {

    var Comment = {
        CommentText: $scope.CommentText

    };
    var getData = MyServices.AddCmnt(Comment);

   getData.then(function (ResultMsg) {

        GetAllComments();
        alert(ResultMsg.data);
    });

    ClearFields();
    $scope.refresh();

};

// Edit The Comment
$scope.EditComment = function () {

    Comment =
        {
            Id: Comment.Id,
            CommentText: $scope.UpdateCommentText

        }
    alert(Comment.CommentText);
    //var getData = MyServices.getCommentById(Comment.Id);

    var getData = MyServices.EditCmnt(Comment);

    getData.then(function (ResultMsg) {
        alert(ResultMsg.data);
        GetAllComments();
    });


};

// Delete The Comment
$scope.RemoveComment = function (Comment) {
    var getData = MyServices.DeleteCmnt(Comment);

    getData.then(function (ResultMsg) {
        alert(ResultMsg.data);
        GetAllComments();
    },
    function () {
        alert('Error in Deleting Comment');
    });
}

//Clear Fields After Comment Addition
function ClearFields() {
    $scope.CommentText = "";
    angular.forEach(angular.element("input[type='file']"), function (inputElem) {
        angular.element(inputElem).val(null);
    });
};

});

in the index page the comment.commenttext which is editable text and coming from database on click of edit there will be a editable text box and after editing the text on click of save button i cant get value of edited text what shpold to in editcomment section to retrieve value of edited text? i tried $scope.Comment.commenttext but it is undefined.. help me thanks in advance..

4
  • try using $scope.CommentText Commented Sep 15, 2016 at 8:44
  • tried but not get the value it says undefined Commented Sep 15, 2016 at 8:54
  • The only ng-modelI see there is UpdateCommentText. Have you tried $scope.UpdateCommentText ? Commented Sep 15, 2016 at 8:59
  • yes i tried it it is undefined Commented Sep 15, 2016 at 9:20

1 Answer 1

2

You have a double bind here:

<h3>
<text 
    style="color:mediumpurple;" 
    e-form="rowform" 
    data-ng-model="UpdateCommentText" 
    editable-text="Comment.CommentText"
    >
    {{Comment.CommentText || 'Empty'}}
</text>
</h3>

So basically you see what is binded with data-ng-model, not experssion in {{ }} Try getting UpdateCommentText value. Maybe this helps.

Sign up to request clarification or add additional context in comments.

5 Comments

i want to bind the value after editing the text so what can i do?
What you are doing in angular is called two way binding. so when you bind this variable to the input field with ng-bind or {{ }}, if you change the input field variable also changes. As for your example: as far as I can understand you want to change Comment.CommentText value according to an input, so what you need to do is just set ng-model="Comment.CommentText", and when you will change your text, variable Comment.CommentText will also change.
and for getting value in angular controller?
$scope.Comment.CommentText If that doesn't help, can you create a plunker?
no I haven't experience of plunker and my project is in mvc with webapi so it is difficult to create

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.