Scribd Logo
Upload

Welcome to Scribd!

  • Program 2

    Uploaded by

    prajwalsethuram
    3 views2 pages
    The document describes how to create two-way data binding in AngularJS. It involves creating an input field and binding it to a variable using ng-model. It also creates a paragraph element that displays the same variable, so that both elements are updated simultaneously as the variable value changes. This allows updating the input field to change the paragraph text, and vice versa.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    ODT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes how to create two-way data binding in AngularJS. It involves creating an input field and binding it to a variable using ng-model. It also creates a paragraph element that displays the same variable, so that both elements are updated simultaneously as the variable value changes. This allows updating the input field to change the paragraph text, and vice versa.

    Copyright:

    © All Rights Reserved
    Download as ODT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views2 pages

    Program 2

    Uploaded by

    prajwalsethuram
    The document describes how to create two-way data binding in AngularJS. It involves creating an input field and binding it to a variable using ng-model. It also creates a paragraph element that displays the same variable, so that both elements are updated simultaneously as the variable value changes. This allows updating the input field to change the paragraph text, and vice versa.

    Copyright:

    © All Rights Reserved
    Download as ODT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    Two-way Data Binding:

    ● Create a new AngularJS application with an input field and a paragraph element.
    ● Use ng-model directive to bind the input field value to a variable in the
    controller.
    ● Display the value of the input field in the paragraph element using the same
    variable.
    ● Update the paragraph element whenever the input field value changes, and vice
    versa.

    <!DOCTYPE html>
    <html>
    <head>
    <title>
    Two-way Data Binding in AngularJS
    </title>
    <script src= "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js">
    </script>
    </head>

    <body ng-app="myApp">
    <h1>NMAMIT</h1>
    <h3>Two-way Binding</h3>
    <h4>Registration form</h4>
    <form name="registrationForm" ng-controller="myCtrl">
    <label>Enter your name</label>
    <input type="text" ng-model="name" />
    <br />
    <label>Enter your age</label>
    <input type="text" ng-model="age" />
    <br />
    <p>Courses:</p>
    <input type="checkbox" ng-model="value1" name="option1" value="C++" />
    <label>C++</label>
    <br />
    <input type="checkbox" ng-model="value2" name="option2" value="Java" />
    <label>Java</label>
    <br />
    <input type="checkbox" ng-model="value3" name="option3" value="Python" />
    <label>Python</label>
    <br />
    <input type="submit" ng-click="details()" />
    <div>
    <br />
    <table border="1px solid black"
    style="border-collapse: collapse">
    <tr border="1px solid black"style="border-collapse: collapse" ng-
    repeat="x in registrationDetails">
    <td>{{x.key}}</td>
    <td>{{x.value}}</td>
    </tr>
    </table>
    </div>
    </form>
    <script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
    $scope.details = function() {
    $scope.courses = [];
    if($scope.value1)
    $scope.courses.push(registrationForm.option1.value);
    if($scope.value2)
    $scope.courses.push(registrationForm.option2.value);
    if($scope.value3)
    $scope.courses.push(registrationForm.option3.value);
    $scope.registrationDetails = [{
    key: 'Name',
    value: $scope.name
    }, {
    key: 'Age',
    value: $scope.age
    }, {
    key: 'Courses interested in',
    value: $scope.courses.toString()
    }, ];
    };
    });
    </script>
    </body>
    </html>

    You might also like