AngularJS ng-model Directive

The ng-model directive is a cornerstone of AngularJS, enabling two-way data binding between the HTML view and the application’s model. This dynamic synchronization makes it easy to manage user input, form validation, and real-time updates.

In this guide, we’ll explore the ng-model directive, its uses, practical examples, and how it enhances interactivity in AngularJS applications. For more AngularJS insights, visit The Coding College, your hub for programming tutorials.

What is ng-model in AngularJS?

The ng-model directive binds the value of an HTML input, select, or textarea element to a variable in the application’s scope. It ensures that changes in the input field reflect in the scope variable and vice versa.

Key Features:

  1. Two-Way Data Binding: Synchronizes the model and the view in real-time.
  2. Form Validation: Works seamlessly with AngularJS validation directives like ng-required, ng-pattern, and more.
  3. Dynamic Interaction: Enables instant updates in the UI as users interact with the application.

Syntax

<input type="text" ng-model="variableName">
  • ng-model: Specifies the variable in the AngularJS scope to bind to the input field.

Example: Basic Usage of ng-model

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <h1>Welcome, {{ name }}</h1>
        <input type="text" ng-model="name" placeholder="Enter your name">
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.name = "AngularJS User";
        });
    </script>
</body>
</html>

Output:
Typing into the input field instantly updates the greeting message above it.

Using ng-model with Different Input Types

1. Text Input

<input type="text" ng-model="textValue">
<p>Text: {{ textValue }}</p>

2. Checkbox

<input type="checkbox" ng-model="isChecked">
<p>Checked: {{ isChecked }}</p>

3. Radio Buttons

<input type="radio" ng-model="selectedOption" value="Option1"> Option 1  
<input type="radio" ng-model="selectedOption" value="Option2"> Option 2  
<p>Selected: {{ selectedOption }}</p>

4. Dropdown (Select)

<select ng-model="selectedItem">
    <option value="Item1">Item 1</option>
    <option value="Item2">Item 2</option>
</select>
<p>Selected: {{ selectedItem }}</p>

5. Textarea

<textarea ng-model="userMessage"></textarea>
<p>Your Message: {{ userMessage }}</p>

Example: Real-Time Search Filter

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <h2>Search List</h2>
        <input type="text" ng-model="searchText" placeholder="Search items">
        <ul>
            <li ng-repeat="item in items | filter:searchText">{{ item }}</li>
        </ul>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.items = ["AngularJS", "React", "Vue", "Svelte"];
        });
    </script>
</body>
</html>

Output:
Typing in the search bar filters the list in real-time.

Form Validation with ng-model

The ng-model directive integrates seamlessly with AngularJS form validation.

Example: Required Input Field

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <form name="myForm">
            <label for="email">Email:</label>
            <input type="email" id="email" ng-model="userEmail" required>
            <span ng-show="myForm.email.$error.required">Email is required!</span>
        </form>
        <p>Email: {{ userEmail }}</p>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {});
    </script>
</body>
</html>

Key Points:

  • The required attribute ensures the field cannot be empty.
  • The ng-show directive displays an error message when validation fails.

Benefits of Using ng-model

  1. Real-Time Synchronization: Updates the view and model simultaneously.
  2. Simplifies Validation: Built-in support for form validation.
  3. User Interactivity: Makes UI updates seamless and responsive.
  4. Dynamic Forms: Great for building interactive and dynamic forms.

Practical Example: Live Word Counter

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <h2>Word Counter</h2>
        <textarea ng-model="userText" placeholder="Type something..."></textarea>
        <p>Word Count: {{ userText.split(' ').filter(word => word).length }}</p>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.userText = "";
        });
    </script>
</body>
</html>

Output:
As the user types in the textarea, the word count updates dynamically.

Conclusion

The ng-model directive is a crucial tool for creating dynamic, interactive applications in AngularJS. Its ability to bind the view and model in real-time simplifies development and makes user interaction seamless.

Leave a Comment