Question

我是棱角分明的新人。我看到了构造函数，模板，选择器等。我不知道。我知道$ scope，$ rootscope，模块和控制器。有了这些我已经为ngFor编写了一个代码。我相信在nf之前我们在angular1中有了ngRepeat。请纠正它。

 <html ng-app="moduleA">

 <head>
 <title> Collections

 </title>
 <script src="angular.js"></script>
   <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
 <script 
 src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js">
 </script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>

 <body>
  <script>

   angular.module('moduleA')
  .controller('SubjectController',function($scope,$rootscope){

        $scope.todos = [
        { id: 1, title: 'Learn AngularJS', description: 'Learn,Live,Laugh AngularJS', done: true },
        { id: 2, title: 'Explore hibernate', description: 'Explore and use hibernate instead of jdbc', done: true },
        { id: 3, title: 'Play with spring', description: 'spring seems better have a look', done: false },
        { id: 4, title: 'Try struts', description: 'No more labour work..use struts', done: false },
        { id: 5, title: 'Try servlets', description: 'Aah..servlets stack seems cool..why dont u try once', done: false }
    ];
    });
</script>

<div ng-controller="moduleA">

        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Title</th>
                    <th>Description</th>
                    <th>Done?</th>
                </tr>
            </thead>
            <tbody>
                <tr ngFor="let todo of todos">
                <td> {{todo.id}}</td>
                <td> {{todo.title}}</td>
                <td> {{todo.description}}</td>
                <td> {{todo.done}}</td>
                </tr>
            </tbody>
        </table>

    </div>

Answer 1

您 cannot 对angularjs使用 ngFor ，您可以使用 ng-repeat 进行迭代一个集合。

 <tr ng-repeat="todo in todos">

样本

  angular.module('moduleA',[])
  .controller('SubjectController',function($scope){

        $scope.todos = [
        { id: 1, title: 'Learn AngularJS', description: 'Learn,Live,Laugh AngularJS', done: true },
        { id: 2, title: 'Explore hibernate', description: 'Explore and use hibernate instead of jdbc', done: true },
        { id: 3, title: 'Play with spring', description: 'spring seems better have a look', done: false },
        { id: 4, title: 'Try struts', description: 'No more labour work..use struts', done: false },
        { id: 5, title: 'Try servlets', description: 'Aah..servlets stack seems cool..why dont u try once', done: false }
    ];
    });

<html ng-app="moduleA">

 <head>
 <title> Collections
 </title>
 <script src="angular.js"></script>
   <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
 <script 
 src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js">
 </script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
 <body>
  <script>

 
</script>

<div ng-controller="SubjectController">

        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Title</th>
                    <th>Description</th>
                    <th>Done?</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="todo in todos">
                <td> {{todo.id}}</td>
                <td> {{todo.title}}</td>
                <td> {{todo.description}}</td>
                <td> {{todo.done}}</td>
                </tr>
            </tbody>
        </table>

    </div>

Answer 2

正如其他人所述，ngFor不是AngularJS的一部分

但是，您可以在$rootScope上创建函数以简单地为ngRepeat生成一个虚拟数组，如下所示：

/**
* Generates range for ngRepeat
* @param start
* @param stop
* @param increment
*/
$rootScope.generateRange = function(start, stop, increment) {
    let a = [];

    for(; start < stop; ) {
        a[start] = start;
        start += increment;
    }

    return a;
};

您可以在视图中像这样使用它：

<!-- Generates 3 star icons -->
<span class="active" ng-repeat="i in generateRange(0, 3, 1)">
    <i class="fa fa-star"></i>
</span>

如何在angularjs中使用ngFor

2 个答案: