AngularJS Binding Overview

What is Data Binding in AngularJS?

Role of $scope in Data Binding

One way data Binding in AngularJS

Two way data Binding in AngularJS

ng-bind-template directive

ng-non-bindable directive

Binding model object to Dropdown list

Binding model object to Dropdown list

In the post ng-bind directive we saw on how to bind values to simple textbox elements, in this example we shall see on how to bind a list of values to a drop down control.

<html ng-app="bindApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
    <script>
var app = angular.module('bindApp', []);

function bindController($scope) {
    $scope.myLanguages = [
                             {
                                      "code": "en",
                                      "name": "English"
                             },
                             {
                                      "code": "de",
                                      "name": "German"
                             }];
};
</script>
</head>
<body>
          <div ng-controller="bindController">
                   <select
                             ng-model="myLanguage"
                             ng-options="value.code as value.name for value in myLanguages">
                             <option>--</option>
                   </select>
                   <div>
                             Selected Language: {{myLanguage}}
                   </div>
          </div>
</body>
</html>

Output

ng-bind-template directive

The ng-bind-template directive is similar to the ng-bind directive, the ng-bind directive supports binding for only one variable / property from the model, while the ng-bind-template directive can bind more than one model variable / property in a single template.

The ng-bind directive provides one way binding between the model and the View, and changes made in the view will not be reflected in the model. The ng-bind-template achieves the same in addition supports binding multiple value at once.

The below example shows a simple implementation of ng-bind-template to achieve one way data binding between the model and the view using multiple values.

Two way data binding in AngularJS

AngularJS supports both one-way and two-way data binding between the model and the view, depending on the need one can use any one of these bindings. As the name suggests two-way data binding is bidirectional, the data from the model is bound to the view and any changes made in the view are reflected back in the model. The ng-model directive enables two-way data binding

The core functionality of ng-model directive is to provides data binding between the model and the view in AngularJS. The ng-bind directive additionally provides validation, state management functionality.

The below example provides a basic implementation of data binding using ng-model

<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
</head>
<body>
          <div ng-init="Name='FirstName, LastName'">
                   Enter Name: <input type="text" ng-model="Name"><br/><br/>
                   Your Name is :{{Name}}
          </div>
</body>
</html>

Output

When the user changes the text in the text box, it automatically reflects in the label.

One way data binding in AngularJS

AngularJS supports both one-way and two-way data binding between the model and the view, depending on the need one can use any one of these bindings. As the name suggests one-way data binding is unidirectional the data from the model is bound to the view and not vice versa. The ng-bind directive enables one-way data binding

The ng-bind directive provides one way binding between the model and the View, and changes made in the view will not be reflected in the model. The ng-bind directive is similar to using expressions {{ expression }} in AngularJS.

The below example shows a simple implementation of ng-bind to achieve one way data binding between the model and the view.

Role of $scope in Data Binding

The $scope object is the default model object provided by AngularJS, the $scope acts as the model between the controller and the view layers.

The $scope is a JavaScript object which binds the controller and the view in an AngularJS MVC application. Both the controller and the view can access the $scope object, 2 way binding between the model and view is enabled using the $scope object.

In complex applications where we have the view and controller in different files we explicitly use the $scope object in the view to refer to the properties and methods defined in the model object.

The below example demonstrated the use of $scope object to bind between the model and the view.

What is Data Binding in AngularJS?

Data binding is the feature by which the data from the model is bound to the View in an MVC (Model View Controller) representation, the Controller controls the way the model is bound to the view. AngularJS supports MVC pattern and allows binding model data to the view layer.

Binding data to ComboBox in C# Windows Form

In this post Binding data to ComboBox in C# Windows Form, we shall see on how to query data from a SQL Server database and bind the results to a ComboBox control.

First let us create a new Windows form and add a ComboBox control to the form.

Once we are done we can navigate to the code view and add the code to get data from SQL Server and bind the same to the ComboBox.

Since we are going to get the data from SQL Server database, add a reference to
using System.Data.SqlClient;

Add the following code to form Load event, to load the ComboBox with data.

private void frmViewEmployees_Load(object sender, EventArgs e)

{

    BindDepartments();

}

//

private void BindDepartments()

{

    // Read the connection string from the app.config file.

    string strConn = ConfigurationSettings.AppSettings["ConnectionString"].ToString();

    SqlConnection objConn = new SqlConnection(strConn);

    SqlCommand objCmd = new SqlCommand("SELECT 0 as ID,'-Select-' as Name UNION SELECT ID, NAME FROM DEPARTMENT", objConn);

    SqlDataAdapter objDA = new SqlDataAdapter(objCmd);

    DataSet dsDepartment = new DataSet();

    //

    objDA.Fill(dsDepartment, "dtDepartment");

    //

    cmbDepartment.DataSource = dsDepartment.Tables["dtDepartment"];

    cmbDepartment.DisplayMember = "Name";

    cmbDepartment.ValueMember = "ID";

}

Run the application,  the form opens up with the ComboBox populated with data from the SQL Server database.

That’s it we have populated a ComboBox, with data from a SQL Server database using C# Windows forms.

CheckBoxList Binding options Dynamically

CheckBoxList Binding options Dynamically

In general we make use of the CheckBox control to design a list of check boxes in the screen, but what if we need to display a lot of checkboxes in a page say 25+, and if the values and text for these checkboxes will vary dynamically.

Asp.Net offers a CheckBoxList control, to handle this situation, this control allows data binding similar to a GridView or Dropdown List control, using which we can bind a data source to the CheckBoxList control.

Let us see on how to use this control.

 
In the .aspx page just add the CheckBoxList tag without adding any options as follows.

Select Name:

<tr>

    <td style="text-align:left;>

        Select Name:

        <asp:CheckBoxList

            ID="chkListNames"

            runat="server"                    RepeatDirection="Vertical">

        </asp:CheckBoxList>

    </td>

</tr>

 <tr>

    <td style=" text-align:left;>

        <asp:Button

ID="cmdSave"

runat="server"

Text="Save"

onclick="cmdSave_Click" />

  <B>Selected Names:B>

     

<asp:Label

ID="lblNames"

runat="server">

</asp:Label>

    </td>

</tr>

Then navigate to the code behind file and add the required options as follows.

protected void Page_Load(object sender, EventArgs e)

{

    if (!Page.IsPostBack)

    {

//Data Access code to get the options from the DB
chkListNames.DataSource = dtEmployee;

        chkListNames.DataValueField = "ID";

        chkListNames.DataTextField = "Name";

        chkListNames.DataBind();

    }

}

protected void cmdSave_Click(object sender, EventArgs e)

{

    string strNames = string.Empty;

    foreach (ListItem chkItem in chkListNames.Items)

    {

        if (chkItem.Selected == true)

        {

            strNames += chkItem.Text + ", ";

        }

    }

    //

    lblNames.Text = strNames;

}

Finally on clicking the Submit button the selected Checkbox options will be displayed as follows.

That’s it we have bound the options to the CheckBoxList control at runtime.

RadioButtonList Binding options Dynamically

RadioButtonList Binding options Dynamically

In general we declare the options of a RadioButtonList control statically in the .aspx page, but what if we need to set these values at runtime based on data from a database, we shall see on how to achieve this.

The Asp.Net RadioButtonList control allows data binding similar to a GridView or Dropdown List control, using which we can bind a data source to the RadioButtonList control.

In the .aspx page just add the RadioButtonList tag without adding any options as follows.

Select Name:

<asp:RadioButtonList

    ID="radListName"

    runat="server"

    RepeatDirection="Vertical">

</asp:RadioButtonList>

Then navigate to the code behind file and add the required options as follows.

protected void Page_Load(object sender, EventArgs e)

{

     radListName.DataSource = dtEmployee;

   radListName.DataValueField = "ID";

   radListName.DataTextField = "Name";

   radListName.DataBind();

}

That’s it we have bound the options to the RadioButtonList control at runtime.

Asp.Net – GridView with TemplateField

The Asp.Net GridView control allows us to bind data from the Data Sources and displays the bound data in a tabular format. The GridView also offers a lot of additional functionality like Paging, Sorting, Formatting, TemplateColumns etc.

Let us now see as to how the GridView control can be used to bind and display data in an Asp.Net page.

Open an Asp.Net page and add a GridView tag with a list of column definitions.