AngularJS 数据绑定,双向绑定(ng-model)

xiaoxiao2021-02-28  21

数据双向绑定:视图上的数据通过表单元素绑定到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>

转载请注明原文地址: https://www.6miu.com/read-2350047.html

最新回复(0)