| layout | post |
|---|---|
| title | Getting started with AngularJS ListView control | Syncfusion |
| description | Learn here about getting started with Syncfusion Essential AngularJS ListView control, its elements and more. |
| platform | AngularJS |
| control | ListView |
| documentation | ug |
The ListView control allows you to select an item from a list-like interface and provides the infrastructure to display a set of data items in different layouts or views. Lists display data, data navigation, result lists, and data entry. This section explains briefly about how to create a web ListView widget in your application with Angular JavaScript by step-by-step instructions. The following screenshot illustrates the output of a ListView widget.
Essential JS includes angular directives for all controls with the ej.widget.angular.min.js script file. All the Essential JS directives have been encapsulated into a single module called ejangular. To render our ej controls in angular, you need to refer the “angular.min.js” and “ej.widget.angular.min.js” in your application.
Create a new HTML file and include the below code:
{% highlight html %}
<title>Essential Studio for JavaScript : AngularJS Support for Listview </title> <script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.0.0.min.js" type="text/javascript"> </script> <script src="[http://borismoore.github.io/jsrender/jsrender.min.js](http://borismoore.github.io/jsrender/jsrender.min.js)"></script> <script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script> <script type="text/javascript" src="http://cdn.syncfusion.com/ {{site.releaseversion}}/js/web/ej.web.all.min.js "></script> <script src="http://cdn.syncfusion.com/ {{site.releaseversion}}/js/common/ej.widget.angular.min.js"></script>{% endhighlight %}
The ng-app directive explains the root element (<html> or <body> tags) of the application. You will assign a name to the ng-app directive, then you must create a module with that name. In this module, you will have to define your directives, services, filters and configurations.
A controller is defined using ng-controller directive. Each controller accepts an object $scope which we pass as a parameter. This object is used to bind the controller with view.
Properties can be bind to ejListView control using the prefix e- and particular property name as shown as below
Add a <div> element. It is a container for ListView control.
{% highlight html %}
{% endhighlight %}
To render the ejListview using angular directive, we need to inject the ejangular directive with modules.
{% highlight js %}
<script>
angular.module('listviewApp', ['ejangular'])
.controller('ListviewCtrl', function ($scope) {
});
</script>
{% endhighlight %}
The Listview supports the data binding feature. When a widget’s model attribute is bound to a scope variable, it can reflect the changes both ways.
The below table depicts the properties of Listview widget that supports model binding:
| control | Supported properties |
| ejListview | selectedItemIndex checkedIndices dataSource |
Please use the below code the bind the Listview in two-way support.
{% highlight html %}
{% endhighlight %}
{% highlight js %}
angular.module("ListViewApp", ['ejangular'])
.controller('ListViewCtrl', function ($scope) {
$scope.selected = 3;
});
{% endhighlight %}
Here the ngModel directive binds an input, select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
Run the above code to render the following output.
We can add a header for ListView. Refer to the following script.
{% highlight html %}
{% endhighlight %}
Run the above code to render the following output.
