AngularJS 组件动态使用 N 次

Question

我是 AngularJS 的新手，我在我的模块中使用组件。 我有模块：

angular.module("reviewApp",[]).component("applicantDetails",{
   templateUrl : '../comp/Applicant_Details_Fields.html',
   controller : function($scope){...}
});

此时我可以像这样从 HTML 代码中使用我的组件

<applicant-details></applicant-details> 但现在我需要将其更改为更灵活。根据给定的 N 值，它必须在 HTML N 中添加该组件。 例如 N = 3;那么它必须在我的 html 代码中动态添加 3 次

<applicant-details></applicant-details>

我可以用 AngularJS 以简单的方式实现这个功能吗？我尝试了几种方法，并搜索了很多次，但我找不到如何做到这一点。 即使我尝试使用 JavaScript 添加该标签，但它只能理解没有内容的空标签。

Answer 1

这是一个在 Angular js 中简单循环的例子

<div ng-app="myapp">
<div ng-controller="ctrlParent">
    <ul>
        <li ng-repeat="i in getNumber(myNumber) track by $index"><span>{{$index+1}}</span></li>
    </ul>

    <ul>
        <li ng-repeat="i in getNumber(myOtherNumber) track by $index"><span>{{$index+1}}</span></li>
    </ul>
</div>

var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
    $scope.myNumber = 5;
    $scope.myOtherNumber = 10;
    $scope.getNumber = function(num) {
        return new Array(num);   
    }
});

检查输出：http://jsfiddle.net/sh0ber/cHQLH/