<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title></title>
<link rel="stylesheet" href="css/ionic.min.css" />
<script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
<script type="text/javascript">
var phones = ["华为p10","华为p9","meto9"];
var coms = ["thinkpadl","华硕","神舟"];
var pads = ["联想","小米","华为"]; var app = angular.module("myApp",['ionic']); app.controller("myCtr1",function($scope){ $scope.mainData = phones; $scope.types = ["手机","电脑","平板"];
$scope.nameRight = ["Right 1", "Right 2", "Right 3"];
$scope.showName = function(str){
if(str == "Phone"){
$scope.mainData = phones;
} else if(str == "computer"){
$scope.mainData = coms;
}else{
$scope.mainData = pads;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtr1">
<!--
Menu Layout
-->
<ion-side-menus>
<!--
Author
: offlineTime: 2018-04-26Description
: Middle area
-->
<ion-side- menu-content>
<p ng-repeat=" s in mainData">{{s}}</p>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-list>
<ion-item ng-click="showName(t);" ng-repeat="t in types">{{t}}</ion-item> </ion-list> </ion-side-menu> <ion-side-menu side="right"> <ion-list> <ion-item ng-repeat="n in nameRight">{{n}}</ion-item> </ion-list> </ion-side-menu> </ion-side-menus> </body> </html>