使用NG復刻KO範例9 - 事件繫結

Live Demo

<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
  <meta charset="utf-8">
  <title>Lab 9 - 事件繫結</title>
    <style>
      .block
      {
          width: 50px; height: 50px;
          border: 2px dotted gray; cursor: pointer;
          float: left; text-align: center;
          margin-right: 10px; background-color: white;
          line-height: 50px;
      }
    </style>
  </head>
<body ng-controller="defaultCtrl" ng-style="{ backgroundColor: model.bgColor }">
  <div>
      <div class="block" ng-repeat="color in model.colors" 
       ng-style="{ color: color }" 
       ng-mouseover="model.miceOver(color)"
       ng-mouseout="model.miceOut()"
      >
        {{ color }}
      </div>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
  <script>
    angular.module("sampleApp", [])
    .controller("defaultCtrl", function($scope) {
      
      function myViewModel() {
        var self = this;
        var origBgColor = "#444";
        self.colors = ["Red", "Green", "Blue"];
        self.bgColor = origBgColor;
        self.miceOver = function (data) {
            self.bgColor = data;
        };
        self.miceOut = function () {
            self.bgColor = origBgColor;
        };        
      }
      $scope.model = new myViewModel();
    });
  </script>
</body>
</html>

只有兩點補充:
1) ng-style="{ prop1:value1, prop2: value2 }"可指定Inline Style
2) ng-mouseover, ng-mouseout事件

[NG系列]
http://www.darkthread.net/kolab/labs/default.aspx?m=post&t=angularjs

Comments

Be the first to post a comment

Post a comment