Implement custom display with Ng-repeat-start in Angular.js _angularjs

Objective

It is well known that ANGULARJS can be used to ng-repeat display list data, which should be familiar to everyone, it is very simple and convenient to use, for example, to display a product table, Controller's Javascript code is as follows:

Angular.module (' app ', [])
. Controller (' Mycontroller ', mycontroller);

Mycontroller. $inject = [' $scope '];
function Mycontroller ($scope) {
 //Product list data to display;
 $scope. Products = [
  {
   id:1,
   name: ' Product 1 ', C12/>description: ' Product 1 description. '
  },
  {
   id:2,
   name: ' Product 3 ',
   Description: ' Product 2 description. '
  },
  {
   id:3,
   name: ' Product 3 ',
   Description: ' Product 3 description. '
  }
 ];
}

The corresponding HTML view code is as follows:

 <table class= "Table" >
  <tr>
   <th>id</th>
   <th>name</th>
   <th >description</th>
   <th>action</th>
  </tr>
  <tr ng-repeat= "p in Products" >
   <td></td>
   <td></td>
   <td></td>
   <td><a href= " # ">Buy</a></td>
  </tr>
 </table>

Run Effect chart:

But if all the pages are in one row for each product, it's too boring, like the user wants to customize the display:

Each product occupies two rows of the table, so the effect can not be realized with ng-repeat. However, Angularjs provides ng-repeat-start and ng-repeat-end to implement the above requirements, ng-repeat-start and ng-repeat-end The syntax is as follows:

Assuming that [' a ', ' B '] two products are provided, the resulting HTML results are as follows:

After understanding ng-repeat-start the ng-repeat-end usage, the required interface is easy to implement and the code is as follows:

 <table class= "Table table-bordered" >
  <tr ng-repeat-start= "p in Products" >
   <td></td>
   <td rowspan= "2" ><a href= "#" >Buy</a></td>
  </tr>
  <tr ng-repeat-end >
   <td></td>
  </tr>
 </table>

Summarize

The above is angular.js in the use of Ng-repeat-start to achieve a custom display of all the content, I hope the content of this article for everyone to learn or use angular.js can help, if there are questions you can message exchange, thank you for your support cloud habitat community.