AngularJS | 数据绑定

AngularJS是一个基于JavaScript的前端框架，它的重点是为Web应用程序提供数据绑定和MVC模式支持。其中，数据绑定是AngularJS中最强大的功能之一。

什么是数据绑定？

数据绑定是指将数据源和视图（HTML）中的元素进行关联。当数据源中的值发生变化时，与之关联的视图元素也会自动更新。AngularJS支持单向绑定和双向绑定两种数据绑定方式。

单向绑定

在单向数据绑定中，数据流只是单向的，即只能从数据源流向视图。这意味着，当数据源中的值发生变化时，视图中的元素会自动更新，但是当视图中的元素值发生变化时，数据源不会随之改变。

单向绑定示例代码：

<div>
    <p>{{ greeting }}</p>
    <button ng-click="changeGreeting()">Change Greeting</button>
</div>

angular.module('myApp', [])
    .controller('myController', function($scope) {
        $scope.greeting = 'Hello World!';

        $scope.changeGreeting = function() {
            $scope.greeting = 'Hola Mundo!';
        };
    });

在上面的示例中，我们定义了一个greeting变量并将其绑定到视图中的一个p元素上。同时，我们在控制器中定义了一个changeGreeting函数，该函数将greeting变量的值改为“Hola Mundo!”。

双向绑定

双向绑定是指将数据源和视图双向绑定，这意味着当数据源中的值发生变化时，与之关联的视图元素会自动更新；反之，当视图元素的值发生变化时，数据源也会相应地更新。

双向绑定示例代码：

<div>
    <input type="text" ng-model="username"/>
    <p>Hello {{ username }}!</p>
</div>

angular.module('myApp', [])
    .controller('myController', function($scope) {
        $scope.username = '';

        $scope.$watch('username', function(newVal, oldVal) {
            console.log('username changed from ' + oldVal + ' to ' + newVal);
        });
    });

在上面的示例中，我们使用ng-model将用户输入的值与$scope中的username变量进行双向绑定。同时，我们也定义了一个$watch函数，该函数会监听username变量的值变化并在控制台中输出要变更的内容。

总结

AngularJS中的数据绑定是一项非常重要的功能，它可以帮助我们快速地将数据流与视图关联起来。另外，AngularJS还提供了过滤器、指令、服务等其他功能，助力我们构建高效的Web应用程序。