码农教程 - 一技在手,衣食无忧! tools

AngularJS 数据绑定

❮ 上一节 下一节 ❯

AngularJS 中的数据绑定是模型和视图之间的同步。

数据模型

AngularJS 应用程序通常有一个数据模型。数据模型是可用于应用程序的数据的集合。

示例

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "John";
  $scope.lastname = "Doe";
});

HTML 视图

显示 AngularJS 应用程序的 HTML 容器称为视图。

视图可以访问模型，并且有多种方法可以在视图中显示模型数据。

您可以使用ng-bind指令，它将元素的innerHTML绑定到指定的模型属性：

示例

<p ng-bind="firstname"></p>
亲自试一试 »

您还可以使用双大括号{{ }}显示模型中的内容：

示例

<p>First name: {{firstname}}</p>
亲自试一试 »

或者您可以使用ng-modelHTML 控件上的指令将模型绑定到视图。

这个ng-model指令

使用ng-model将模型中的数据绑定到 HTML 控件（输入、选择、文本区域）上的视图的指令

示例

<input ng-model="firstname">
亲自试一试 »

这个ng-model指令提供模型和视图之间的双向绑定。

双向绑定

AngularJS 中的数据绑定是模型和视图之间的同步。

当数据在模型变化，则看法反映了变化，并且当数据在看法变化，则模型也更新了。这会立即自动发生，从而确保模型和视图始终更新。

示例

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="firstname">
  <h1>{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "John";
  $scope.lastname = "Doe";
});
</script>
亲自试一试 »

AngularJS 控制器

AngularJS 中的应用程序由控制器控制。阅读有关控制器的信息AngularJS 控制器章节。

由于模型和视图的即时同步，控制器可以与视图完全分离，而只需专注于模型数据。由于 AngularJS 中的数据绑定，视图将反映控制器中所做的任何更改。

示例

<div ng-app="myApp" ng-controller="myCtrl">
  <h1 ng-click="changeName()">{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstname = "John";
  $scope.changeName = function() {
    $scope.firstname = "Nelly";
  }
});
</script>
亲自试一试 »

❮ 上一节 下一节 ❯