Ng-Repeat-7

 

This example is about special start and end points of the ng-repeat directive.This is used to extend the scope of the repeated data. In this example we have an array named items with the head, body and footer content. We display the head in the header container and use ng-repeat-start in this div and body in the next div tag and then in the next div use ng-repeat-end. After the ng-repeat-end we can not access the repeated data.

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> </head> <body ng-app="app"> <div ng-controller="controllerName"> <header ng-repeat-start="item in items" style="height:50px;width:300px;border:2px solid black;background-color:#13934d;color:white"> <h2 style="text-align:center">{{ item.head }}</h2> </header> <div class="body" style="height: 150px; width: 300px; border: 2px solid black; text-align: center"> <p>{{ item.body }}</p> </div> <div ng-repeat-end> <br /> </div> </div> <script> var app = angular.module("app", []); app.controller('controllerName', ['$scope', function ($scope) { $scope.items = [ { head: 'HTML', body: 'Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages', footer: '' }, { head: 'JavaScript', body: 'JavaScript is a powerful scripting program that adds interactivity to web pages.',Footer:'' }, { head: 'JQuery', body: 'jQuery is a JavaScript library that allows web developers to add extra functionality to their websites.', footer: 'Footer for Slide 3' }, { head: 'AngularJS', body: 'In Angular, a Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope.', footer: 'Footer for Slide 4' }, ]; }]); </script> </body> </html>
Output