This tutorial will explain how to achieve check all and uncheck all checkbox using angularjs and listing…
We found 0 resources for you...
In my recent comment box one of my reader asking me to create a demo for the…
In the last tutorial we have seen a new State but it just navigated us to a new Page with text “More”. So in this tutorial we are going to see how we are going to display the “More” page with bigger image of the car and the description of the car and as well a “Back Button” for going back to home page. Well, I am going to break the above work in three steps.
After all the work done in the last two tutorials we are about to do the real stuff which we need to do. In our app on the right side we always see the description of the car and now we are going to include a button labeled “More” and on click of the “More” we are to navigate to a new page. Let’s do that one by one.
In the last tutorial we have seen there happened to be a change in the url. The url changed from http://127.0.0.1:58586/index.html to http://127.0.0.1:58586/index.html#/ . This change is because of the introduction of the ui-router and its default state mechanisms. By default ui-router uses # tag for navigation and this behavior needs to be overridden. To bring back to the normal url without # tag we need to implement the following steps.
Angular is mostly used for SPA (Single Page Application) but still every app requires some kind of navigation from one view to other view. Take our very own application here we navigate now on click of click of the images we populate the description on the right hand side. What if I need a button in the right hand side labeled “More” and on click of the “More” I need to go to a different view/page completely without hiding or showing something. Does Angular has any tricks up in the sleeves?
Well before going in to this tutorial I am assuming you are using brackets to run these sample applications. The reason I am asking is because brackets has an inbuilt webserver which runs our app from the localhost like below
Angular js has lot of features but the one I like most is its services, well it has given the user to build a custom service and inject that service in to angular js components like controller where the data will be fetched from that service.
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???????????
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