In this tutorial we are going to see how to use ng-repeat in our newly created directive and create a dynamic list of <car-details> directive. Great, in our previous blog we just created one <vide0-details/> and provided it with one image source and a title. What if we need to show many images with title more like a car thumbnails with caption in car galleries. We could go ahead and create many instances of <car-details/> like below
<car-details src="assets/img1.png" title="New Image title1"></car-details> <car-details src="assets/img2.png" title="New Image title2"></car-details> <car-details src="assets/img3.png" title="New Image title3"></car-details> <car-details src="assets/img4.png" title="New Image title4"></car-details> <car-details src="assets/img5.png" title="New Image title5"></car-details>
Awesome, this will display all the images and its caption in the above order but what if I wanted this thing to be little more dynamic. Lets say I have a JSON/JS object like below in my Controller.
app.controller('mainController',function($scope){ $scope.cars = [ { url:"https://static.pexels.com/photos/24353/pexels- photo.jpg", name:"SHELBY" }, { url:"https://static.pexels.com/photos/28993/pexels-photo.jpg", name:"BMW" }, { url:"https://static.pexels.com/photos/116675/pexels-photo-116675.jpeg", name:"LAND ROVER" } ]; });Here we have attached an array “cars” to our controller’s scope which has the list of car image url and its name. Lets Assume that these cars were got from the Service for now and we need to display this car images dynamically in the screen with their titles. Lets use our custom directive <car-details/> and our directive needs two things one is a image source which is nothing but the “url” in cars array and second is name which is nothing but the name in cars array. But how we can display this cars array in our page?
Well the answer is very simple and that is “Just use ng-repeat …….”
<body ng-app="appViewer" ng-controller="mainController"> <div ng-repeat="car in cars"> // Introduced one div to iterate the cars <car-details src="{{car.url}}" title="{{car.name}}"></car-details> </div> </body>If you look at the above code we have introduced a new div and kept <car-details/> inside it. This is just for understanding purpose you could even use ng-repeat on top of the <car-details/> directive itself. Basically ng-repat iterates the cars object in mainControllerâs scope provide car object every time in DOM which is just a single car object. This car object is used to set the src and title attribute of our custom directive <car-details/> directive. So in the earlier blog we have hard coded src and title but here we are dynamically setting the attributes from the $scope.cars and by iterating $scope.cars using ng-repeat in DOM level and assign values to <car-details/> custom directive and there by seeing the output like below
Note: In cardetails.html I have given some raw styling to the div to shrink the size of image like below.
<div> <img ng-src="{{src}}" style="width:304px;height:228px;"></img> <div>{{title}}</div> </div> 
Leave a Reply