標籤：script module 內容 char model bsp console angular 即時
雙向資料繫結
方向1：模型資料（model）綁定到視圖（view）
實現方法：①.{{model變數名}} ②.常用指令（ng-repeat）
方向2：將視圖（view）中使用者輸入的資料繫結到模型資料(model)
實現方法：ng-model指令，用在表單組件中（input select）
$watch()監聽模型變數值的改變—>執行指定的方法
$watch(‘變數名’,function(){…});
一個很簡單的栗子：
即時擷取輸入框中輸入的內容，列印在控制台
1 <!DOCTYPE html> 2 <html ng-app="myApp"> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>雙向資料繫結</title> 6 <script src="js/angular.js"></script> 7 </head> 8 <body ng-controller="myCtrl"> 9 <!--通過ng-model把視圖資料繫結到模型上，同時又通過{{}}的形式把模型資料繫結到視圖上，實現雙向資料繫結-->10 <input type="text" ng-model="kw"/>11 <p>{{kw}}</p>12 <script>13 var app = angular.module(‘myApp‘,[‘ng‘]);14 app.controller(‘myCtrl‘, function ($scope) {15 $scope.$watch(‘kw‘,function(){16 console.log($scope.kw);17 })18 19 });20 </script>21 </body>22 </html>
AngularJs學習筆記4——四大特性之雙向資料繫結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
