Great, I am going to make this app more like an usable application and right now what we are displaying is just a list of cars and its names and we have got the whole right side of the application empty. I think of putting that space in to a more usable one. Well what we can do???????????
Ok lets try to put some contents related to the cars. In this section I am going to display some description of the car when clicked on a car.
First thing I would do is to set up the data part in the scope. In the last tutorial itself we have cars in the scope of mainController and I am going to add one attribute to car object called desc [which I have copied from Wikipedia].
$scope.cars = [ {url:"https://static.pexels.com/photos/24353/pexels-photo.jpg", name:"SHELBY", desc:"The Shelby Mustang is a high performance variant of the Ford Mustang which was built by Shelby from 1965 to 1968, and from 1969 to 1970 by Ford. Following the introduction of the fifth generation Ford Mustang in 2005, the Shelby nameplate was revived as a new high-performance model, this time designed and built by Ford.[1]"}, {url:"https://static.pexels.com/photos/28993/pexels-photo.jpg", name:"BMW", desc:"BMW was established as a business entity following a restructuring of the Rapp Motorenwerke aircraft manufacturing firm in 1917. After the end of World War I in 1918, BMW was forced to cease aircraft-engine production by the terms of the Versailles Armistice Treaty.[5] The company consequently shifted to motorcycle production as the restrictions of the treaty started to be lifted in 1923,[6] followed by automobiles in 1928â29"}, {url:"https://static.pexels.com/photos/116675/pexels-photo-116675.jpeg", name:"LANDROVER", desc:"Land Rover is a car brand that specialises in four-wheel-drive vehicles, owned by British multinational car manufacturer Jaguar Land Rover, which is in turn owned by India's Tata Motors since 2008.[4] The Land Rover is regarded as a British icon, and was granted a Royal Warrant by King George VI in 1951"} ];
Cool, we got the data part ready and we need to wire our ng-click event from the mark up to the controller. Let’s write our ng-click event in our index.html like the below
<div style="float:left;margin-right:10px"> <car-details ng-repeat="car in cars" src="{{car.url}}" title="{{car.name}}" ng-click="onSelect($index)"></car-details> </div>
Well I am not surprised if you know the ng-click and its behavior, since we have tied the ng-click with whole car-details directive any click both on the image or the title text will fire ng-click. So you may be asking what’s the $index ?
$index is an inbuilt angular service which is used along with the ng-repeat directive to find the current looping index so that the developer need not find a way to get the current index. So on every click we are passing the $index as a parameter to click handler. So how its handled in the controller.
mainController.js
$scope.onSelect = function(index){ $scope.desc= $scope.cars[index].desc; }
Very simple create a function and attach it to $scope’s onSelect which you have created just in the above code. Inside the function create one more variable in $scope called desc which is equated to the selected index of the cars array. This will fetch you the desc of the current selected car. Great now you have selected car’s description from car’s array but no effect on the display. You are right you need to bind the desc in the html like below
Index.html
<body ng-app="appViewer" ng-controller="mainController"> <div style="float:left;margin-right:10px"> <car-details ng-repeat="car in cars" src="{{car.url}}" title="{{car.name}}" ng-click="onSelect($index)"></car-details> </div> <div> {{desc}} </div> </body>
Now you will be seeing the user interface like below since I have selected the second car it shows the desc of BMW below
But there is one problem here, which is first time when we refresh the browser there wont be any description this is because we are creating a $scope.desc only on click handler so to have a default description of the first car lets do some thing like the below.
mainController.js
$scope.desc = $scope.cars[0].desc;
Add this one line in the mainController, this will get the 0th car’s desc to desc variable in scope which will get automatically reflected because of our {{desc}} in the index.html.
All right now in this tutorial, you have learnt how to add the content navigation. This is a basic way in angular we deal mostly with data and not with DOM manipulation. Any DOM Manipulation has to be done inside the directive’s link function which we will discuss in a different tutorial.
Discussion about this post