用 AngularJS 创建 div

Question

我知道这很简单，但我想问一下如何在 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>

有人帮忙吗？

谢谢

Answer 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 是我找到它的 post。

Answer 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>

用 AngularJS 创建 div

Create div with AngularJS

html

angularjs

metro-ui-css