Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
  <meta charset="utf-8">
  <title>Lab 15 - 訂閱屬性變更事件</title>
</head>
<body ng-controller="defaultCtrl">
    <dl>
        <!-- ver 1.3+支援updateOn設定 -->
        <dt>Name</dt>
        <dd><input ng-model="model.name" ng-model-options="{ updateOn: 'blur' }" /></dd>
        <dt>Score</dt>
        <dd><input ng-model="model.score" ng-model-options="{ updateOn: 'default', debounce: { default: 500 } }" /></dd>
    </dl>
    <div>
      {{model.name}}
    </div>
  <script src="http://code.angularjs.org/1.3.0-beta.10/angular.js"></script>
  <script>
    angular.module("sampleApp", [])
    .controller("defaultCtrl", function($scope) {
      function myViewModel() {
        var self = this;
        self.name = "Jeffrey";
        self.score = 32767;
      }
      var vm = new myViewModel();
      $scope.model = vm;
      //透過$watch關注Scope內屬性的變化
      $scope.$watch("model.name", function(newValue, oldValue) {
        console.log("name=" + newValue);
      });
      $scope.$watch(function(scope) {
         return scope.model.score;
      }, function(newValue, oldValue) {
        console.log("score: " + oldValue + "->" + newValue);
      });
    });
  </script>
</body>
</html>
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
darkthreadpro
0viewers