AngularJS入門（用ng-model指令實現雙向綁定）

時間 2019-12-06

標籤 angularjs 入門 model 指令實現雙向綁定欄目 AngularJS 简体版

原文原文鏈接

上一章介紹了AngularJS框架的插值語法和ng-bind指令，本章介紹ng-model指令，本指令用於實現input和變量的雙向綁定。 html

示例代碼： angularjs

<!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變量也會被框架改變，從而使段落中文字自動跟隨變化。 app

HelloController中定義了一個init()方法，button的ng-click指令會觸發這個方法，相似的事件指令還有不少，用法基本一致，只是click換成dbclick這樣不一樣事件名而已。框架