AngularJS中的双向数据绑定

在这篇文章中，我们将看到数据绑定，同时了解代码是如何从Typescript文件到HTML文件的，反之亦然的实现。

在AngularJS中，数据绑定指的是模型和视图之间的同步。在双向数据绑定中，数据流是双向的，即当模型中的数据发生变化时，这些变化会反映在视图中，而当视图中的数据发生变化时，也会反映在模型中。双向数据绑定是通过使用ng-model指令来实现的。ng-model指令将数据从视图转移到模型，又从模型转移到视图。

方法：将实施以下方法来实现双向绑定。

创建一个模块

var app=angular.module('myApp',[])

给模块添加一个控制器。在这里你可以写出在视图变化时更新模型的逻辑。

app.controller('myCtrl',function($scope){})

在元素中指定ng-model指令。

<input ng-model="name"/>

例子1：这个例子展示了如何使用ng-model指令进行双向数据绑定。

<!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="">
    <h1>GeeksforGeeks</h1>
    <h3>Two-way Data Binding</h3>
    <form>
        <label>Enter your name </label>
        <input type="text"
               ng-model="name"> 
    </form>
    <p>{{name}}</p>
</body>
</html>

解释：在上面的例子中，我们在输入元素中使用了ng-model指令。当用户在输入元素中输入数据时，它会反映在

标签，我们用一个表达式来显示’name’的值。这是一个双向数据绑定的例子，因为当我们改变输入控件的值时，变量’name’的值也会改变。

输出:

AngularJS中的双向数据绑定

例子2：在这个例子中，我们创建了一个注册表格。用户填写详细信息并点击提交按钮。在点击提交按钮时，用户填写的详细信息就会显示出来。

<!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>GeeksforGeeks</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>