AngularJS 資料繫結,雙向繫結(ng-model)
阿新 • • 發佈:2019-01-03
資料雙向繫結:檢視上的資料通過表單元素繫結到Model模型($scope)上。 (使用者只能通過表單元素輸入資料)
demo.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS</title> <script src="angular.min.js"></script> <!-- 引入AngularJS框架 --> </head> <body ng-app="App"> <!-- ng-app 指定模組 --> <div ng-controller="DemoController"> <!-- 通過表單元素繫結資料(使用者可以通過表單元素輸入資料) --> <input type="text" ng-model="msg" > <!-- 資料雙向繫結。ng-model資料從檢視繫結到$scope上 --> <button ng-click="show()">顯示</button> <ul> <li ng-bind="msg"></li> <!-- ng-bind資料從$scope上繫結到檢視上 --> </ul> </div> <script> // 建立模組 var App = angular.module('App',[]); App.controller("DemoController",['$scope',function($scope) { // $scope相當於MVC中的Model $scope.show = function() { alert($scope.msg); //檢視中繫結到$scope上的資料。 } }]); </script> </body> </html>