Angularjs - 如何“ng-repeat”一个 div 以获取“ng-model 中的值”-times?
Posted
技术标签:
【中文标题】Angularjs - 如何“ng-repeat”一个 div 以获取“ng-model 中的值”-times?【英文标题】:Angularjs - How to 'ng-repeat' a div for 'value in ng-model'-times? 【发布时间】:2014-01-19 20:17:08 【问题描述】:使用 Angularjs,如果用户在文本框中输入“10”,我想创建说 10 <div>
。
<input type="text" id="gcols" placeholder="Number of Columns" ng-model="cols"/>
因此,无论用户在此框中输入什么值,都会创建许多值。所以我的笼统问题是,如何在 'ng-model' 时间'ng-repeat' <div>
?
更新: 感谢您的所有答案,我通过参考您的答案做了类似以下的事情。到目前为止,这是有效的,但请告诉我是否有任何其他逻辑比这更有效。
$scope.divs = new Array();
$scope.create=function() //I added a button & invoked this function on its ng-click
var a = $scope.cols;
for(i=0;i<a;i++)
$scope.divs.push(a);
alert($scope.divs);
;
【问题讨论】:
ng-repeat defined number of times instead of repeating over array?的可能重复 【参考方案1】:您需要创建一个数组来对其进行迭代。 在您的控制器中:
app.controller('ctrl', function ($scope)
$scope.cols = 0;
$scope.arr = [];
$scope.makeArray = function ()
$scope.arr.length = 0;
for (var i = 0; i < parseInt($scope.cols) ; i++)
$scope.arr.push(i);
);
在你看来:
<div ng-controller="ctrl">
<input ng-model="cols" type="text" ng-change="makeArray()" />
<div ng-repeat="o in arr">hi</div>
</div>
JSFiddle
【讨论】:
嘿,我试过了。但是输入框被禁用。我不能给它赋值 对不起。我已经编辑了我的样本。您可以查看 jsfiddle 链接。【参考方案2】:在你看来:
<input ng-model="cols" ng-change="colsChanged()"/>
<div ng-repeat="item in items track by $index">$index item</div>
在您的控制器中:
app.controller('MyCtrl', function($scope)
$scope.cols = 0;
$scope.colsChanged = function ()
$scope.items = new Array(+$scope.cols);
;
//optional: if you're starting with 1 or more "cols"
$scope.colsChanged();
);
或者,您可以推出自己的指令,该指令使用嵌入来重复多次,但这可能会涉及并且可能不会给您带来太多好处。
【讨论】:
【参考方案3】:演示:http://jsfiddle.net/JsFUW/
在您的模块/应用程序/控制器中
$scope.cols =4; /* a default */
$scope.divs =[]; /* whatever these are */
在模板中
<input type="text" id="gcols" placeholder="Number of Columns" ng-model="cols"/>
<div ng-repeat="div in divs | limitTo:cols" >
...
</div>
作为评论问题,试试这个:
在控制器中
$scope.cols
在模板中
<input type="text" id="gcols" placeholder="Number of Columns" ng-model="cols"/>
<h3>cols: cols </h3>
您是否在键入时看到页面上的值发生变化?如果不是,您的 $scope.cols 不在模板范围内。
【讨论】:
H i Sujit,通过一些故障排除更新了答案,并提供了一个工作示例的链接。以上是关于Angularjs - 如何“ng-repeat”一个 div 以获取“ng-model 中的值”-times?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用AngularJS从ng-repeat中的数组中删除对象?
如何通过angularJS中的计数使用ng-repeat循环
如何使用 ng-repeat 使 bxSlider 在 AngularJS 中工作?