How to give angular support for listview while using inside navigation drawer
How to give angular support for listview while using inside navigation drawer?
We can achieve angular support the listview control which is rendered inside the navigation drawer. Please find the below code snippets.
First, we have to refer the angular supporting scripts to the sample and then we need to add the ng-app and ng-controller attributes to the sample where ng-app is necessary to make the control to get render with angular support. Here we set the angular binding for a list items through datasource property which is present inside the navigation drawer. Please refer the below code snippets.
[html] <!DOCTYPE html> <html ng-app="SynApp"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" /> <meta charset="UTF-8" /> <link href="themes/default/ej.web.all.min.css" rel="stylesheet" type="text/css" /> <title>EJ Navigation Drawer with Angular </title> <script src="scripts/jquery-2.0.0.min.js" type="text/javascript"></script> <script src="scripts/ej.web.all.min.js" type="text/javascript"></script> <script src="scripts/ej.unobtrusive.min.js" type="text/javascript"></script> <script src="scripts/jsrender.min.js" type="text/javascript"></script> <script src="scripts/angular.min.js" type="text/javascript"></script> <script src="scripts/ej.widget.angular.min.js" type="text/javascript"></script> </head> <body ng-controller="navPaneCtrl"> <div class="header"> <div id="header"> Home </div> </div> <!--navigation wrapper--> <div class="navwrapper"> <!--navigation drawer with angular attributes--> <div ej-navigationdrawer e-enablelistview="true" e-targetid="header" e-position="normal" id="navpane"> <e-items> <e-item e-text="value1"></e-item> <e-item e-text="value2"></e-item> <e-item e-text="value3"></e-item> <e-item e-text="value4"></e-item> </e-items> </div> </div> <script> //angular controller to assign angular variable for all the list items angular.module('SynApp', ['ejangular']) .controller('navPaneCtrl', function ($scope) { $scope.value1 = "Home"; $scope.value2 = "Profile"; $scope.value3 = "Photos"; $scope.value4 = "Location"; }); </script> <style> body { margin: 0; }
.header { background: none repeat scroll 0 0 blue; height: 45px; width: 100%; }
#header { background-image: url("themes/images/drawericon.png"); background-repeat: no-repeat; height: 38px; width: 38px; color: white; font-size: 32px; padding-top: 4px; text-indent: 45px; } .navwrapper { position:relative; height:700px; } </style> </body> </html> |
Output:
