Angularjs - 如何“ng-repeat”一个 div 以获取“ng-model 中的值”-times？

Posted 2023-03-05

【中文标题】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，通过一些故障排除更新了答案，并提供了一个工作示例的链接。