用ng重复或ng模型填充一个文本区域，这样它就不会用迭代的数据一个接一个地创建新的文本区域

filling a textarea with ng-repeat or ng-model so that it does not create a new textarea one on top of the other with the iterated data

本文关键字：一个 文本 区域 ng 迭代 数据 创建 模型 填充      更新时间：2023-09-26

im在尝试使用ng repeat用数据填充单个10行文本区域时遇到问题，而是为每个数据条目创建一个新的文本区域。我怎么能插入其中呢？我想使文本区域的大小与ng重复输入的条目数量动态

这是我的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我不知道这是否与有关

将项目连接到一个字符串中，用换行符分隔

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

然后，您可以使用项数组的长度来设置文本区域上的行数。

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

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

您正在重复<textarea>（在其本身或通过包含的div），以便它在item的每个实例上迭代。您需要做的是将ng-repeat全部去掉，并使用ng-model来连接一个字符串，如ajs的答案所示。

相关文章：