使用 AngularJS 创建 div答案

【问题标题】：Create div with AngularJS使用 AngularJS 创建 div
【发布时间】：2015-11-06 18:45:19
【问题描述】：

我知道这很简单，但我想问一下如何在 ng-Repeat 中创建 div，包括定义对象数量的对象属性。例如我有一个像

这样的对象

    function rowModel() {
       this.id = 0;
       this.columnCount = 1;
    }

我填充了一个如下所示的数组

    $scope.Rows = [];
        $scope.AddRow = function() {
        var newRow = new rowModel();
        newRow.id = 1;
        newRow.columnCount = 3;
        $scope.Rows.push(newRow);
    }

我只想创建一个 html 模板，每行包含 3 个 div。这是我的 html，我想复制对象模型中定义的 .cell div 3 次

<button class="button" ng-click="AddRow()">Satır Ekle</button>
<div class="row cells{{row.columnCount}} bg-cyan" ng-repeat="row in Rows">
    <div class="cell" ng-repeat="column in row.columnCount">{{row.id}}</div>
</div>

有人帮忙吗？

谢谢

【问题讨论】：

标签： html angularjs metro-ui-css

【解决方案1】：

在您的控制器中使用以下代码

$scope.getNumber = function(num) {
    return new Array(num);   
}

并在您的视图中使用以下内容

<button class="button" ng-click="AddRow()">Satır Ekle</button>
<div class="row cells{{row.columnCount}} bg-cyan" ng-repeat="row in Rows">
    <div class="cell" ng-repeat="column in getNumber(row.columnCount)  track by $index">{{row.id}}</div>
</div>

此外，如果您不想要触摸控制器，您也可以这样做 ng-repeat="_ in ((_ = []) && (_.length=row.columnCount) && _) 跟踪 $index"

Here 是我找到它的帖子。

【讨论】：

【解决方案2】：

我会为此创建一个过滤器

angular.module('myApp')
  .filter('range', function(){
    return function(n) {
      var res = [];
      for (var i = 0; i < n; i++) {
        res.push(i);
      }
      return res;
    };
  });

之后，在视图上可以这样使用：

<div class="cell" ng-repeat="column in row.columnCount | range">{{row.id}}</div>

【讨论】：