将textarea中的数据附加到div

时间:2017-01-12 05:23:40

标签: javascript angularjs

如何使用anglurjs按Enter键将textarea中的数据附加到div。在这段代码中,我将数据附加到alertbox上,但我想在特定部分(div)上追加数据,就像在聊天应用中一样

HTML

<div ng-app="miniapp">
    <div ng-controller="Ctrl">
        <input ng-enter="DoWork()" ng-model="MyText" />
        <div id="chatContent" ng-model="chatData"></div>
    </div>    
</div>

app.js

var $scope;
var app = angular.module('miniapp', []).filter('moment', function() {
    return function(dateString, format) {
        return moment(dateString).format(format);
    };
});

app.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnter);
                });

                event.preventDefault();
            }
        });
    };
});

function Ctrl($scope) {
    $scope.DoWork = function(){
          alert('Hello World! ' + $scope.MyText);
          $scope.chatData = $scope.$scope.MyText;
    };
}

1 个答案:

答案 0 :(得分:1)

检查此示例。此示例在jquery上。您可以在代码中获取帮助并使用相同的登录。

 <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    function abc(){
        var a=$("#mytext").val();
        $("#mydiv").append(a);

    }
</script>
</head>
<body>
    <textarea id="mytext" rows="" cols=""></textarea>
    <button onclick="abc()">Submit</button>
    <div id="mydiv"></div>
</body>
</html>