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="app">
<head>
​
  <meta charset="utf-8">
  <title>Filter執行頻率示範</title>
  <style>
    input,div { display: block; margin: 12px; }
  </style>
</head>
<body ng-controller="ctrl as m">
  <input ng-model="m.text" />
  <input ng-model="m.other" /> 
  <input type="button" value="Do Nothing"
         ng-click="m.doNothing()" />
  <div>
    by filter: {{m.text|sayHi}}
  </div>
  <div>
    by $watch: {{m.message}}
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
  <script>
    function MyCtrl($scope) {
      var self = this;
      self.text = "Jeffrey";
      self.other = "blah";
      self.doNothing = function() { };
      self.message = "";
      $scope.$watch(
        function() {
          return self.text; 
        }, 
        function(newValue) {
          console.log("watch-changed")
          self.message = "Hi, " + newValue;
        });
    }
    angular.module("app", [])
    .controller("ctrl", MyCtrl)
    .filter("sayHi", function() {
      return function(value) {
        console.log("filter-exec");
        return "Hi, " + value;
      }
    })
  </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