Textarea与AngularJS模型绑定后有多余的空间

Question

我使用angularjs来制作SPA。

单击确定按钮后，我的对象将被序列化为JSON字符串并显示在textarea控件中。

这里是我的代码：

• HTML：

  $scope.CreateFoodInfo = function (shownModal) { 
         $scope.serializedInfo = angular.toJson($scope.food); 
         $(shownModal).modal("show"); 
        } 
  

但最后，我有这样的：

<div id="resultModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Result</h4> 
      </div> 
      <div class="modal-body"> 
        <textarea class="form-control" 
           readonly="readonly" 
           rows="10"> 
         {{serializedInfo}} 
        </textarea> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

    </div> 
</div> 

我的JS代码部分：

我在我的textarea里面有多余的空格。

任何人都可以帮助我解决这个问题吗？

我使用

• 的JQuery 2.2.1
• AngularJs 1.5.0