How to give angular support for listview while using inside navigation drawer

Platform: jQuery |

Control: ejNavigationDrawer |

Published Date: July 14, 2017 |

Last Revised Date: May 10, 2019

Tags: navigationdrawer

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>

<head>

<title>EJ Navigation Drawer with Angular </title>

</head>

Home

</div>

<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>

//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:

ListView

Did you find this information helpful?

How to give angular support for listview while using inside navigation drawer

How to give angular support for listview while using inside navigation drawer?

Please sign in to access our KB

CONTACT US