11-controller

最新推荐文章于 2025-04-20 20:15:00 发布

原创最新推荐文章于 2025-04-20 20:15:00 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

angularJS 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个使用AngularJS创建简单应用程序的例子。通过一个包含输入框和显示全名的区域的示例，展示了如何定义控制器，使用$scope对象来管理数据，并通过指令如ng-model和{{expression}

<!-- 
在大型的应用程序中，通常是把控制器存储在外部文件中。
只需要把 <script> 标签中的代码复制到名为 xxx.js 的外部文件中即可：
-->
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
    <head>
        <meta charset="utf-8">
        <script src="js/angular.js"></script>
    </head>
    <body>
        <!--记住：ng-model只能用于表单元素 常见的表单元素是
            <input>
            <select>
            <option> 
            <textarea>
            因此下边第一个h1显示不出数据
        -->
        <div ng-controller="myctrl">
            <h1 ng-model="firstName"></h1>
            <h1 ng-model="lastName"></h1>
        </div>
        <div ng-controller="myctrl">    
            名: <input type="text" ng-model="firstName"><br>
            姓: <input type="text" ng-model="lastName"><br>
            <br>
            姓名: {{firstName + " " + lastName}}
            <br>
            <!-- 记得要加上()-->
            函数:{{fullName()}}
        </div>
        <!--
            实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。
            控制器也可以有方法（变量和函数）：
         -->
    </body>
    <script type="text/javascript">
        var app = angular.module('myapp',[]);
        app.controller('myctrl',function($scope){
            $scope.firstName="james";
            $scope.lastName='bond';
            $scope.fullName = function() {
                return $scope.firstName+" "+$scope.lastName;
    }
        });

    </script>
</html>