• 数据绑定data-binding
    • 功能的绑定
    • 更多地方的绑定

    数据绑定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运行结果