ng-repeat demo

ng-repeat demo

by Ryan Hsu

HTML

<div ng-app>
  <div ng-controller="DemoCtrl">
    <!-- 標題 -->
    <h2>{{title}}</h2>

    <!-- 副標題 -->
    <h3>共{{allCount}}項事件，已完成{{finishCount}}項，未完成{{unfinishCount}}項</h3>

    <!-- Todo列表 -->
    <div>
      <!-- ng-repeat開始 -->
      <li ng-repeat="item in dataList">
        {{item.name}}
      </li>
      <!-- ng-repeat結束 -->
    </div>
  </div>
</div>

JavaScript

function DemoCtrl($scope) {
  //先預設給畫面上的待辦清單資料
  $scope.title = '我的待辦清單';
  $scope.allCount = 0;
  $scope.finishCount = 0;
  $scope.unfinishCount = 0;

  // 給ng-repeat使用的資料列表
  $scope.dataList = [{
    name: '第一項'
  }, {
    name: '第二項'
  }, {
    name: '第三項'
  }, ];
}