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

上一章介绍了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这样不同事件名而已。

来源：oschina

链接：https://my.oschina.net/u/76091/blog/338534

标签

angularjs

ng-model

ng-click

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!