2017-01-12 13 views
1

どのようにして、anglurjsを使用してEnterキーを押して、テキストエリアからdivにデータを追加できますか?このコードでは、私はalertboxにデータを追加していますが、私はチャットのアプリでdivへのテキストエリアからのデータの追加

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

HTMLが

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

をapp.jsなどの特定のセクション(DIV)にデータを追加したいですこの例を確認してください。この例は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> 
関連する問題