ionic簡單應用加列表
阿新 • • 發佈：2019-02-17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="lib/css/ionic.css" rel="stylesheet" />
<script src="lib/js/ionic.bundle.js"></script>
<script>
var myapp=angular.module("modu",["ionic"]);
myapp.controller("con",function($scope){
$scope.items=[1,2,3];
$scope.dorefresh=function(){
$scope.items.push($scope.items.length+1);
$scope.$broadcast("scroll.refreshComplete");
}
})
</script>
</head>
<body ng-app="modu" ng-controller="con">
<ion-header-bar class="bar-positive">
<button class="button button-icon">左側按鈕</button>
<h2 class="title">八維商城</h2>
<button class="button button-icon">右側按鈕</button>
</ion-header-bar>
<ion-content>
<img src="../day03_video/img/aa.jpg" width="300"/>
<ion-refresher pulling-text="下拉重新整理" on-refresh="dorefresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items">{{item}}</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar class="bar-assertive">
<h2 class="title">本商城由八維公司負責</h2>
</ion-footer-bar>
</body>
</html>