<!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 = ["右1","右2","右3"];
$scope.showName = function(str){
if(str == "手机"){
$scope.mainData = phones;
}else if(str == "电脑"){
$scope.mainData = coms;
}else{
$scope.mainData = pads;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtr1">
<!--
菜单布局
-->
<ion-side-menus>
<!--
作者：offline
时间：2018-04-26
描述：中间区域
-->
<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>