javascript - Angularjs - 如何 'ng-repeat' 'value in ng-model' 次 div?

标签 javascript html angularjs

使用 Angularjs,我想创建 say 10 <div>如果用户在文本框中输入“10”。

<input type="text" id="gcols" placeholder="Number of Columns" ng-model="cols"/>

因此,无论用户在此框中输入什么值,都应创建这些值。所以我的普遍问题是,如何“ng-repeat”<div> 'ng-model' 次?

更新: 感谢您的所有回答,我通过引用您的回答做了类似以下的事情。到目前为止,这是可行的,但请告诉我是否有任何其他逻辑比这更有效。

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

最佳答案

您需要创建一个数组来对其进行迭代。 在你的 Controller 中:

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

关于javascript - Angularjs - 如何 'ng-repeat' 'value in ng-model' 次 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20882004/

相关文章:

javascript - 替换javascript中的某些字符

html - 需要固定站点宽度以删除水平滚动条

javascript - Ionic 中的动态形式并获取 ng-model 的值

javascript - AngularJS - 重新加载 ng 风格的背景图像

javascript - WebStorm JavaScript 实时模板 - 决定光标的位置

javascript - 在单元测试中,我如何将原始对象与范围副本进行比较并避免 Angular $$hashKey

javascript - 使用 RaphaelJS 和 GSAP 动画 SVG 路径

html - float 变化

jquery - 内容出现在汉堡包导航之外

javascript - Angular Material $mdDialog.confirm 具有超过 "OK"和 "Cancel"选项