Javascript 用ng repeat或ng model填充textarea,这样它就不会用迭代数据在另一个textarea上创建新的textarea
我在尝试使用ng repeat用数据填充单个10行文本区域时遇到问题。相反,它会为每个数据条目创建一个新的文本区域。我怎样才能插入一个?我想让textarea的大小与ng repeat输入的条目数量动态匹配 这是我的js文件Javascript 用ng repeat或ng model填充textarea,这样它就不会用迭代数据在另一个textarea上创建新的textarea,javascript,html,angularjs,Javascript,Html,Angularjs,我在尝试使用ng repeat用数据填充单个10行文本区域时遇到问题。相反,它会为每个数据条目创建一个新的文本区域。我怎样才能插入一个?我想让textarea的大小与ng repeat输入的条目数量动态匹配 这是我的js文件 var WaitingRequisitionsController = function($scope, $rootScope, $modal, $window, items) { $rootScope.title = 'Direct Requisitions';
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>
我的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>-->
但如果我把它改成这样,就不会有任何东西出现
我不明白
我需要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");
};
};
然后可以使用items数组的长度设置文本区域中的行数
<textarea type="text" class="form-controler readonly="readonly" rows="rows"
ng-model="items">
</textarea>
您正在重复
(要么在自身中,要么通过一个包含的div
),以便它迭代项的每个实例。你需要做的是去掉ng repeat
,并使用ng model
连接字符串,如的答案所示。这看起来不错,但我无法调整我的字符串,使其正确。我在角度学习2周后,我的JS文件看起来也不像plnkr上的示例那样模块化。我没有在我的身体标签上声明ng应用程序或ng控制器,该死,我甚至没有身体标签是如何模块化你的代码的一个很好的参考。我把它弄乱了一些,我编辑了我的帖子,这样我就可以告诉你我做了什么。我添加了我的变更来源。还是不行。我需要物品。说明不是硬编码阵列。您可以在阵列上使用地图。请仅返回说明。我已经更新了plunker和示例代码。我试过这样做,但没有任何结果。我需要这些对象的描述部分。我把它弄乱了一些,我编辑了我的帖子,这样我就可以告诉你我做了什么。我添加了我的变更来源。还是不行。我需要物品。说明不是硬编码数组。
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>