AngularJS入门(用ng-model指令实现双向绑定)

原创
2014/10/29 16:02
阅读数 6.5W

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



展开阅读全文
打赏
2
4 收藏
分享
加载中
更多评论
打赏
1 评论
4 收藏
2
分享
返回顶部
顶部