angularJs单向/双向数据绑定

最新推荐文章于 2024-10-16 08:03:23 发布

泠泠在路上

最新推荐文章于 2024-10-16 08:03:23 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： angularJs 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/u012396955/article/details/72780930

angularJs 专栏收录该内容

44 篇文章

订阅专栏

本文介绍AngularJS的基本使用方法，包括引入文件、创建模块与控制器、实现数据绑定等关键步骤，并提供了一个简单的示例。

1.引入angular.min.js

2.创建angularJs module ：var m = angular.module('module', []);

3.引入module：ng-app="module"

4.在module下创建controller：

//ctrl:controller的名称，$scope为作用域
m.controller('ctrl', ['$scope', function ($scope) {
        //viewModel
        $scope.name = 'angular';//model   server
    }]);

5.引入controller：ng-controller="ctrl"

6.ng-bind="name"和{{name}}：单向显示$scope绑定的数据，ng-bind为angularjs自带显示数据指令

7.ng-model="name"：双向数据绑定，文本框值改变，name值就改变。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="module" ng-controller="ctrl">
    <h2 ng-bind="name"></h2>
    <h1>{{name}}</h1>
    <input type="text" ng-model="name">
</div>
<script>
    var m = angular.module('module', []);
    //双向数据绑定
    m.controller('ctrl', ['$scope', function ($scope) {
        //viewModel
        $scope.name = 'angular';
    }]);
</script>
</body>
</html>