使用ng-repeat或ng-model填充textarea,以便它不会使用迭代数据创建一个新的textarea

Question

我有问题尝试使用ng-repeat填充单个10行textarea数据,而不是为每个数据条目创建一个新的textarea.我怎么才能插入一个？我想使textarea的大小动态为ng-repeat输入的条目数

这是我的js文件

var WaitingRequisitionsController = function($scope, $rootScope, $modal, $window, items) {
    $rootScope.title = 'Direct Requisitions';
    $scope.items = items;

    $scope.formatDate = function (x) {
        return moment(x).format("M/D/YYYY");
    };
};

这是我的html文件,特别是我试图插入的区域.

  <div class="row ">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
          <div class="form-group">
              <label>Items</label>
              <div ng-repeat="item in req.items">
                  <textarea ng-model="item.description" class="form-control" type="text" readonly="readonly"></textarea>
              </div>
          </div>
      </div>
  </div>

这也是一样的

  <div class="row ">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
          <div class="form-group">
              <label>Items</label>
              <textarea ng-repeat="item in req.items" class="form-control" type="text" readonly="readonly">{{item.description}}</textarea>    
          </div>
      </div>
  </div>

我改变了我的js看起来像这样

var WaitingRequisitionsController = function($scope, $rootScope, $modal, $window, items) {
$rootScope.title = 'Direct Requisitions';
//$scope.items = items;




$scope.formatDate = function (x) {
    return moment(x).format("M/D/YYYY");
   };
};

function TodoCtrl($scope) {
  $scope.items = items.join('\n');
  $scope.$watch('items', function (items) {
    $scope.myArray = items.split('\n');
    console.log('$scope.myArray', $scope.myArray);

 });



  }

和我的HTML看起来像这样

            <!-- <div class="row ">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
        <div class="form-group" ng-app>
        <label>Items</label>-->
        <div ng-app>
            <div ng-controller="TodoCtrl">
                <textarea rows={{rows}}  class="form-control" ng-model="myStr" type="text" readonly="readonly"></textarea>
            </div>
        </div>
               <!-- </div>
            </div>
        </div>-->

但如果我改变它看起来像这样http://jsfiddle.net/U3pVM/8165/没有任何人填充

它工作..我不明白我需要item.description我不知道这是否与它有任何关系

Answer 1

将项目加入单个字符串,由换行符分隔

var WaitingRequisitionsController = function($scope, $rootScope, $modal, $window, items) {

    $rootScope.title = 'Direct Requisitions';

    $scope.items = items
        .map(function (item) {
            return item.description;
        })
        .join('\n');

    $scope.rows = items.length;

    $scope.formatDate = function (x) {
        return moment(x).format("M/D/YYYY");
    };

};

然后,您可以使用items数组的长度来设置文本区域中的数字.

<textarea type="text" class="form-controler readonly="readonly" rows="rows"
          ng-model="items">
</textarea>

Plunker例如:http://plnkr.co/edit/SXSl4nHJi8ptufP6wTd4？p = preview