Twitter Bootstrap Question posted in

how to use ngFor in angularjs-Twitter bootstrap

I am new to angular. I see across constructors,template,selector,etc. i have no idea. I know $scope,$rootscope, module and controller. With these I have written a code for ngFor.I believe before nfFor we had ngRepeat in angular1. please correct it. 

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

Tags:

2

Answers


  1. 0

    You cannot use ngFor with angularjs, you can use ng-repeat to iterate over a collection.

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

    DEMO

      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>
    Login or Signup to reply.
  2. 0

    As others mentioned, ngFor is not a part of AngularJS

    However, you can create function on $rootScope to simply generate a dummy array for ngRepeat as following:

    /**
* 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;
};

    You can use it like this in your views:

    <!-- Generates 3 star icons -->
<span class="active" ng-repeat="i in generateRange(0, 3, 1)">
    <i class="fa fa-star"></i>
</span>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search