AngularJS入门（用ng-model指令实现双向绑定）

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/foodon/blog/338534

文章标签：

#javascript #ViewUI

本文通过实例演示了AngularJS框架中ng-model指令的应用，详细解释了如何实现input元素与作用域变量之间的双向数据绑定，同时展示了如何使用AngularJS内置指令进行事件处理。

为什么80%的码农都做不了架构师？>>>

上一章介绍了AngularJS框架的插值语法和ng-bind指令，本章介绍ng-model指令，本指令用于实现input和变量的双向绑定。

示例代码：

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>ng-model directive</title>
</head>
<body ng-controller="HelloController">
<div>
    <p>双向绑定</p>
    <input ng-model="greeting">
    <p>Hello {{greeting || "World"}}</p>
    <button ng-click="init()">重置</button>
    <hr>
</div>

<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
    function HelloController($scope) {
        $scope.init = function() {
            $scope.greeting = "Hello";
        }
    }
</script>
</body>
</html>

input加上ng-model指令后，框架会负责input和greeting变量的自动同步。

插值中支持表达式语法，下面用了一个或表达式，因为greeting初始为空，所以页面加载后输出Hello World，改变input中的值，greeting变量也会被框架改变，从而使段落中文字自动跟随变化。

HelloController中定义了一个init()方法，button的ng-click指令会触发这个方法，类似的事件指令还有很多，用法基本一致，只是click换成dbclick这样不同事件名而已。

转载于:https://my.oschina.net/foodon/blog/338534