AngularJS中的数据绑定有几种类型

在这篇文章中，我们将了解数据绑定的概念，以及AngularJS中可用的不同类型的绑定。

数据绑定指的是模型和视图之间的数据同步。同步数据对于保持显示给用户的数据和存储的数据随时更新是必须的。在AngularJS中，数据绑定是一个重要的概念，因为它充当了AngularJS应用程序的视图和逻辑之间的桥梁。AngularJS中的数据绑定是通过使用指令实现的。

AngularJS中的数据绑定有2个主要组成部分。

模型：它负责维护应用程序中的数据。
视图：它是向用户显示应用程序的HTML容器。

AngularJS提供两种类型的数据绑定：

单向数据绑定
双向数据绑定

我们将结合实例详细讨论这两个问题。

单向数据绑定：在单向数据绑定中，数据的流动只在**个方向，即从模型到视图。一个值从数据模型中取出，插入一个HTML元素中，并显示给用户。但没有办法根据用户的输入来更新模型，这意味着数据不能从视图流向模型。

单向数据绑定可以通过以下方式实现。

Interpolation
使用ng-bind指令

插值：插值是一种单向的数据绑定技术，用于将数据从TypeScript代码转移到HTML模板（视图）。它使用双大括号中的模板表达式来显示从组件到视图的数据。

语法 :

{{expression}}

例子：这个例子描述了使用双括号表达式的单向数据绑定。

<!DOCTYPE html>
<html>
  
<head>
    <title>Data Binding Example</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <h1>{{title1}}</h1>
        <h2>{{title2}}</h2>
        <p>{{description}}</p>
    </div>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function( $scope) {$ scope.title1 = "GeeksforGeeks";
             $scope.title2 = " AngularJs Data Binding";$ scope.description ="Data Binding refers "
              + "to the synchronization of data "
              + "between the model and view";
        });
    </script>
</body>
</html>

解释：在上面的例子中，我们使用表达式将数据从模型绑定到视图上。在<script>标签，我们已经创建了一个名为 “myApp “的模块。在这个模块中，我们添加了一个控制器 “myCtrl”。我们为这个控制器添加了title1、title2和description等属性。然后，我们在HTML元素中指定了这些属性，以便向用户显示数据。

输出:

AngularJS中的数据绑定有几种类型？

使用 ng-bind指令 ： AngularJS中的ng-bind指令用于将任何特定HTML元素的文本内容与给定表达式中输入的值绑定/替换。只要ng-bind指令中的表达式的值发生变化，指定的HTML内容的值就会更新。

语法:

<element ng-bind="expression"> Contents... </element>

例子。这个例子描述了使用ng-bind指令的单向数据绑定。

<!DOCTYPE html>
<html>
  
<head>
    <title>Data Binding Example</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <p>Firstname: 
            <span ng-bind="firstname"></span>
        </p>
  
        <p>Lastname: 
            <span ng-bind="lastname"></span>
        </p>
    </div>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function( $scope) {$ scope.firstname = "GeeksforGeeks";
            $scope.lastname = "AngularJS";
        });
    </script>
</body>
</html>

解释：在上面的例子中，我们使用了ng-bind来将数据从模型绑定到视图。在<script>标签，我们已经为控制器添加了firstname和lastname等属性。我们在要显示数据的HTML标签中指定了ng-bind指令。在ng-bind指令中，我们指定了我们想要显示的属性。

输出:

AngularJS中的数据绑定有几种类型？

使用ng-bind指令进行数据绑定

双向数据绑定：在这种类型的数据绑定中，数据的流动是双向的，即数据可以从模型流向视图，也可以从视图流向模型。简单地说，我们可以说，当模型中的数据发生变化时，这些变化会反映在视图中，当视图中的数据发生变化时，模型也会更新。视图和模型在任何时候都会被更新。

双向的数据绑定是通过使用ng-model指令实现的。ng-model指令将数据从控制器转移到视图，反之亦然。

例子：在这个例子中，我们创建了一个表单，要求输入用户的姓名、年龄和他们感兴趣的课程。当用户输入所有的字段并点击提交按钮后，用户输入的详细信息就会显示出来。

<!DOCTYPE html>
<html>
  
<head>
    <title>Data Binding Example</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>
  
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <form>
            <label>Enter your name:</label>
            <input type="text" ng-model="name">
            <br>
            <label>Enter your age:</label>
            <input type="number" ng-model="age">
            <br>
            <label>Enter the course you are interested in:</label>
            <input type="text" ng-model="course">
            <br>
            <input type="submit" ng-click="details()"> 
        </form>
        <div ng-show="showdetails">
            <h1>Details entered by the user:</h1>
            <p>Name: {{name}}</p>
            <p>Age: {{age}}</p>
            <p>Course: {{course}}</p>
        </div>
    </div>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function( $scope) {$ scope.showdetails = false;
             $scope.details = function() {$ scope.showdetails = true;
            }
        });
    </script>
</body>
</html>

解释：我们在所有的输入字段中指定了ng-model指令，以便为每个字段创建一个模型属性。最初在控制器中，属性 “details “的值是false。点击提交按钮后，函数details()被调用，将属性 “details “的值改为true。在控制器中 <div>标签，我们指定了ng-show指令，该指令显示了 <div>标签，如果 “详细信息 “的值为真。因此，当用户输入细节并点击提交按钮时，就会用表达式显示细节。

输出:

AngularJS中的数据绑定有几种类型？

双向数据绑定实例

例子：在这个例子中，用户应该输入他们想要订购的每个产品的数量，相应地，价格将被计算并显示给用户。

<!DOCTYPE html>
<html>
  
<head>
    <title>>Data Binding Example</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
        }
          
        tr,    th,    td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 10px;
        }
    </style>
</head>
  
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <table>
            <tr>
                <th>Food Items</th>
                <th>Price</th>
                <th>Quantity</th>
            </tr>
            <tr>
                <td>Pizza</td>
                <td>100</td>
                <td>
                    <input type="number" 
                           ng-model="pizza">
                </td>
            </tr>
            <tr>
                <td>Pasta</td>
                <td>150</td>
                <td>
                    <input type="number" 
                           ng-model="pasta">
                </td>
            </tr>
            <tr>
                <td>Garlic Bread</td>
                <td>170</td>
                <td>
                    <input type="number" 
                           ng-model="garlicbread">
                </td>
            </tr>
            <tr>
                <td>Nachos</td>
                <td>200</td>
                <td>
                    <input type="number" 
                           ng-model="nachos">
                </td>
            </tr>
            <tr>
                <td>Ice Cream</td>
                <td>250</td>
                <td>
                    <input type="number" 
                           ng-model="icecream">
                </td>
            </tr>
        </table>
        <br>
        <button ng-click="calculate()">
            Place Order
        </button>
        <div ng-show="amt!=0">
            <h1>
                Total amount to be paid: {{amt}}
            </h1> 
        </div>
    </div>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function( $scope) {$ scope.title = "Food ordering";
             $scope.amt = 0;$ scope.calculate = function() {
                 $scope.amt = 100 *$ scope.pizza 
                           + 150 *  $scope.pasta + 170 *$ scope.garlicbread 
                           + 200 *  $scope.nachos + 250 *$ scope.icecream;
            }
        });
    </script>
</body>
</html>

解释：在上面的例子中，我们使用了数据绑定，以便从视图中获取用户的数据，将其传递给控制器，控制器使用模型属性进行处理，然后将其传递给视图，以便将数据显示给用户。

输出:

AngularJS中的数据绑定有几种类型？