How to have ng-repeat with no html element?

How to have ng-repeat with no html element?

Asked on October 23, 2018 in AngularJs.
Add Comment


  • 7 Answer(s)

      Angular’s ng-repeat-start and ng-repeat-end
    In the AngularJS we can use the ng-repeat by

    <li ng-repeat-start="page in [1,2,3,4,5]"><a href="#">{{page}}</a></li>
    <li ng-repeat-end></li>
    

    by using the above code we can make AngularJS-ng-repeat with no html element.

    Answered on October 23, 2018.
    Add Comment

      just place the ng-repeat-end declaration on an equivalent hypertext markup language tag that has the ng-repeat-start.

    <ul class="pagination">
      <li>
        <a href="#">&laquo;</a>
      </li>
      <li ng-repeat-start="page in [1,2,3,4,5]" ng-repeat-end><a href="#"></a></li>
      <li>
       <a href="#">&raquo;</a>
      </li>
    </ul>
    

    This gives three advantages:

      -less hypertext markup language tags to write down
      -useless, empty tags don’t seem to be generated by Angular
      -when the array to repeat is empty, the tag with ng-repeat will not get generated, providing you with an         —equivalent advantage Knockout’s containerless binding provides you during this regard

    Answered on October 23, 2018.
    Add Comment

       AngularJS one.2 adds integral support for continuation while not adding kid parts with the new directives ng-repeat-start and ng-repeat-end.

       Here’s a bit example for adding Bootstrap pagination:

    <ul class="pagination">
      <li>
        <a href="#">&laquo;</a>
      </li>
      <li ng-repeat-start="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
      <li ng-repeat-end class="divider"></li>
      <li>
        <a href="#">&raquo;</a>
      </li>
    </ul>
    
    Answered on October 23, 2018.
    Add Comment

    For having ng-repeat without  html elements  use the following code:

    <body ng-app="myApp" ng-controller="myCtrl">
    <h1 ng-repeat="x in records">{{x}}</h1>
    <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
    $scope.records = [
    "Alfreds Futterkiste",
    "Berglunds snabbköp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
    ]
    });
    </script>
    </body>
    
    Answered on December 14, 2018.
    Add Comment

    The following is a code example for having ng-repeat without html element:

    "items": [{companyName: 'xyz', tenantId: 1234, branchId, 2345}, {companyName: 'sarath', tenantId: 7364985, branchId, 23457845}]
       <div class="list">
           <div class="row item" ng-repeat="item in items" data-ng-click="onClickItem(item)">
               <!-- Don't want to add this additional div-->
            <div ng-repeat = "(key, value) in item">
           <div ng-if='$index == 0' class="col col-75">{{value}}</div>
           <div ng-if='$index == 1' class="col">{{value}}</div>
              <div>
          </div>
        </div>
    
    Answered on December 14, 2018.
    Add Comment

    <tbody ng-repeat=“row in array”>
    <tr ng-repeat=“item in row”>
    <td>{{item}}</td>
    </tr>
    </tbody>

    Answered on February 14, 2019.
    Add Comment

    Update: If you are using Angular 1.2+, use ng-repeat-start. See @jmagnusson’s answer.

    Otherwise, how about putting the ng-repeat on tbody? (AFAIK, it is okay to have multiple <tbody>s in a single table.)

    <tbody ng-repeat="row in array">
      <tr ng-repeat="item in row">
         <td>{{item}}</td>
      </tr>
    </tbody>
    Answered on February 22, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.