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

Platform: jQuery |

Control: ejNavigationDrawer

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?

CONTACT US

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