如何获得角度控制器中可编辑文本的值

时间:2016-09-15 08:36:16

标签: c# jquery html angularjs api

我的索引页面在这里

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

我的角度控制器

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

});

在索引页面中的comment.commenttext是可编辑的文本,点击编辑时会出现数据库,会有一个可编辑的文本框,在点击保存按钮后编辑文本后我无法获得编辑文本的值在editcomment部分中检索已编辑文本的值? 我尝试了$ scope.Comment.commenttext但它未定义.. 请事先帮助我..

1 个答案:

答案 0 :(得分:2)

你有一个双重绑定:

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

所以基本上你看到什么是数据-ng-model绑定,而不是{{}}中的表现试着获得UpdateCommentText值。也许这有帮助。