Skip to content

Getting-Started.md

Latest commit

 

History

History
204 lines (134 loc) · 6.46 KB

Getting-Started.md

File metadata and controls

204 lines (134 loc) · 6.46 KB
layout post
title Getting started | ListBox | JavaScript | Syncfusion
description Learn here about getting started with Syncfusion Essential AngularJS ListBox control, its elements, and more.
platform AngularJS
control ListBox
documentation ug

Getting Started in AngularJS ListBox

The ListBox widget that contains a list of selectable items. It performs exceptionally well with thousands of items and supports checkboxes, template, single and multiple selection, keyboard navigation and virtual scrolling. This section explains briefly about how to create a web ListBox in your application with Angular JavaScript by step-by-step instructions. The following screenshot illustrates the functionality of a ListBox widget.

AngularJS ListBox Getting Started

Create a ListBox widget in AngularJS

Essential JavaScript 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 Listbox </title> <script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.1.0.min.js" type="text/javascript"> </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 ejListBox control using the prefix e- and particular property name as shown as below

Create UL and LI elements and add in the body tag as below.

{% highlight html %}

  • Audi A4
  • Audi A5
  • Audi A6
  • Audi A7
  • Audi A8
  • BMW 501
  • BMW 502
  • BMW 503
  • Batch
  • BMW 507
  • BMW 3200
  • Cut

{% endhighlight %}

To render the ejListBox using angular directive, we need to inject the ejangular module with modules.

{% highlight js %}

<script>
    angular.module('listboxApp', ['ejangular'])
     .controller('ListboxCtrl', function ($scope) {
     });
</script>

{% endhighlight %}

Data binding

The Listbox 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 ListBox widget that supports model binding:

control Supported properties
ejListbox value dataSource

Please use the below code the bind the ListBox in two-way support.

{% highlight html %}

Select a car
    Note:Two Way Angular Support

    {% endhighlight %}

    {% highlight js %}

        angular.module('listboxApp', ['ejangular'])
     .controller('ListboxCtrl', function ($scope) {
$scope.dataList= [
       { bikeId: "bk1", bikeName: "Apache RTR" },
       { bikeId: "bk2", bikeName: "CBR 150-R" },
       { bikeId: "bk3", bikeName: "CBZ Xtreme" },
       { bikeId: "bk4", bikeName: "Discover" },
       { bikeId: "bk5", bikeName: "Dazzler" },
       { bikeId: "bk6", bikeName: "Flame" },
       { bikeId: "bk7", bikeName: "Fazer" },
       { bikeId: "bk8", bikeName: "FZ-S" },
       { bikeId: "bk9", bikeName: "Pulsar" },
       { bikeId: "bk10", bikeName: "Shine" },
       { bikeId: "bk11", bikeName: "R15" },
       { bikeId: "bk12", bikeName: "Unicorn" }
];

    $scope.value = "Dazzler"; });

    {% 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.

    AngularJS ListBox Data binding

    Selection

    The ListBox widget also supports the item selection.

    {% highlight html %}

      {% endhighlight %}

      Run the above code to render the following output.

      AngularJS ListBox Selection