2015/08/11

AngularJS Templates


程式碼:
<!DOCTYPE html>
<html ng-app="appName">
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
 <script type="text/javascript">
 var module = angular.module('appName', []);
 module.controller('myController',  function($scope){
  $scope.webs = [
   {'name' : 'Google', 'url' : 'http://www.google.com.tw'},
   {'name' : 'Yahoo', 'url' : 'http://www.yahoo.com.tw'},
   {'name' : 'Ruten', 'url' : 'http://www.ruten.com.tw'}
  ];

  $scope.name = "C.Y. Fang";
  $scope.web = "http://cyfangnotepad.blogspot.tw/";
  $scope.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 });
 </script>
 <meta charset="utf8"/>
 <title>Test</title>
</head>
<body>
 <div ng-controller="myController">
  <div ng-repeat="web in webs">
   <a href={{web.url}}><span>{{web.name}}</span></a><p>
  </div>
  <span>
   <h1><a href={{web}}>{{name}}</a></h1>
  </span>
  <div ng-repeat="number in numbers">
   {{ number * 10}}<p>
  </div>
 </div>
</body>
</html>


執行結果: