数据绑定data-binding

上一节我们介绍了如何将ng-controller的数据显示在HTML当中，但是我们如何在页面中修改这些数据呢？这一步操作也很简单。

我们先直接看看代码吧！

  1. <!DOCTYPE html>
  2. <html lang="zh" ng-app="App">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!-- 网页的标题，我们在这里使用了AngularJS的基本表达式 -->
  6.     <title>{{"学习AngularJS 1.x"}}</title>
  7. </head>
  8. <body>
  9.     <!-- 将FirstCtrl绑定到这个div标签上，这个标签中的内容将可以使用FirstCtrl中的数据-->
  10.     <div ng-controller="FirstCtrl">
  11.         <h1>{{data.message + " World!"}}</h1>
  12.         <!-- 这里增加了一个input输入框，并使用ng-model绑定了data.message-->
  13.         <input type="text" ng-model="data.message">
  14.     </div>
  16.     <script type="text/javascript" src="components/angular/angular.js"></script>
  17.     <script type="text/javascript" src="js/app.js"></script>
  18. </body>
  19. </html>

运行结果

图4-3 ng-controller运行结果

如果您实际运行代码，会发现，您每输入/删除一个文字，改动会马上在上方显示出来。这就是数据绑定的魅力！

功能的绑定

界面操作里面还有一个重要的功能，就是界面上按钮的与控制器中的函数进行绑定。这个也很容易实现：

  1. App.controller("FirstCtrl", function($scope){
  2.     $scope.data = {
  3.       message : "Hello"
  4.     };
  6.     //在$scope上绑定一个函数
  7.     $scope.onClick = function(){
  8.         alert($scope.data.message);
  9.     }
  10. });
  1. <div ng-controller="FirstCtrl">
  2.     <h1>{{data.message + " World!"}}</h1>
  3.     <input type="text" ng-model="data.message">
  4.     <!-- 这里我们放置一个按钮，并使用ng-click绑定了$scope.onClick事件-->
  5.     <input type="button" value="按钮" ng-click="onClick()">
  6. </div>

点击按钮，我们即可看到数据通过弹出框显示了出来（onClick函数中的逻辑）。

图4-3 ng-click运行结果

更多地方的绑定

除了用于显示信息外，数据绑定还可用于其他地方。比如，下面的例子用于根据输入来调整样式：

  1. <!DOCTYPE html>
  2. <html lang="zh" ng-app="App">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>{{"学习AngularJS 1.x"}}</title>
  6.     <style type="text/css">
  7.         /* 删除线 */
  8.         .strike {
  9.             text-decoration: line-through;
  10.         }
  12.         /* 粗体 */
  13.         .bold {
  14.             font-weight: bold;
  15.         }
  17.         /* 红色 */
  18.         .red {
  19.             color: red;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  25. <input type="text" ng-model="data.style">
  26. <div class="{{data.style}}">示例文本(可输入strike bold red)来调整样式</div>
  28. <script type="text/javascript" src="components/angular/angular.js"></script>
  29. <script type="text/javascript" src="js/app.js"></script>
  30. </body>
  31. </html>

运行效果如下：

图4-3-1 ng-click运行结果