前端开发工程师—

前端开发工程师——AngularJS

news2024/11/25 20:20:50

一.表达式和语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body ng-app>
    <!-- ng-app指令： 表示告诉angular它管理当前标签所包含的整个区域，并且会自动创建$rootScope跟作用域对象-->
    <!-- ng-model:表示当前输入框的值与谁关联（属性名：属性值） ，username表示属性名，{{username表示属性值}}他是表达式，获取属性值-->
    <input type="text" ng-model="username">
    <p>您输入的内容是：<span>{{username}}</span></p>
    <script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>

双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body ng-app ng-init="username='tom'">
    <!-- ng-init:用来初始化当前作用域变量 -->
    <!-- ng-model双向数据绑定 -->
    <input type="text" ng-model="username">
    <p>姓名1：<span>{{username}}</span></p><br/>
    <input type="text" ng-model="username">
    <p>姓名2:<span>{{username}}</span></p>
    <script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</body>
</html>

作用域对象和控制器对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
</head>
<body ng-app>
    <!-- 控制器对象 
        用来控制Angular应用数据的实例对象
        ng-controller：用来指定控制器构造函数，Angular会自动new此函数创建控制器对象
        同时还会创建一个新的作用域对象$scope,他是$rootScope的子对象
        在控制器函数中声明$scope形参，Angular会自动将$scope传入
    -->

    <div ng-controller="MyController">
        <input type="text" placeholder="姓" ng-model="firstname">
        <input type="text" placeholder="名" ng-model="lastname">
        <p>输入的姓名为：{{firstname + '-' + lastname}}</p>
        <p>输入的姓名2为：{{getName()}}</p>
    </div>
    <script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
    <script>
        function MyController($scope){
            console.log($scope);
            $scope.firstname = 'kobe';
            $scope.lastname = "tom";
            $scope.getName = function(){
                return $scope.firstname + '' + $scope.lastname;
            }
        }
    </script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1712035.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！