ionic携帯端末実現_メニュー別に対応ページを表示します.
22965 ワード
単一ページのルートをクリックして、ナビゲーションをクリックして対応ページを表示し、現在のナビゲーションは赤色になります.jsにはルートの参照が含まれています.
Insert title here
<div>
</div>
<div class="smallimg">
<ul ng-repeat="x in props" ng-click="kingController($index)">
<li style="text-align:center";>
<a href="/indent/card.html" style="text-decoration:none;">
<h3>{{x.propname}}</h3>
<h3>
<span style="color: #CC3333; font-weight: bold;">￥{{x.price}}</span> <span
style="text-decoration: line-through;">{{x.original}}</span>
</h3>
</a>
</li>
</ul>
</div>
<div>
</div>
<div class="smallimg">
<ul ng-repeat="x in props">
<li style="text-align:center";>
<a href="/indent/card.html" style="text-decoration:none;">
<h3>{{x.propname}}</h3>
<h3>
<span style="color: #CC3333; font-weight: bold;">￥{{x.price}}</span> <span
style="text-decoration: line-through;">{{x.original}}</span>
</h3>
</a>
</li>
</ul>
</div>
<div>
</div>
<div class="smallimg">
<ul ng-repeat="x in props">
<li style="text-align:center";>
<a href="/indent/card.html" style="text-decoration:none;">
<h3>{{x.propname}}</h3>
<h3>
<span style="color: #CC3333; font-weight: bold;">￥{{x.price}}</span> <span
style="text-decoration: line-through;">{{x.original}}</span>
</h3>
</a>
</li>
</ul>
</div>
angular.module('todo', [ 'ionic', 'ngRoute' ]).controller('todoCtrl',function($scope, $http) {
$http.get("/game/getAll").then(function(response) {
$scope.gameNames = response.data.data;
});
$scope.isCurrent = function(index){
$scope.bg = [];
$scope.bg[index] = 'active';
}
}).controller('kingController',function($scope, $route, $http, $routeParams) {
$scope.params = $routeParams;
$http.get("/prop/propList?name=" + $scope.params.name).then(function(response) {
$scope.props = response.data.data;
$scope.gameIcon = $scope.props[0].gameIcon;
});
$scope.$route = $route;
}).controller('dragonController', function($scope, $route, $http) {
$scope.$route = $route;
}).controller('eightDragonsController', function($scope, $route, $http) {
$scope.$route = $route;
}).config(function($routeProvider) {
$routeProvider.when('/ /:name', {
templateUrl : 'king.html',
controller : 'kingController'
}).when('/ /:name', {
templateUrl : 'dragon.html',
controller : 'dragonController'
}).when('/ /:name', {
templateUrl : 'eightDragons.html',
controller : 'eightDragonsController'
}).otherwise({
redirectTo : '/ '
});
});
もう一つの方法switch
Insert title here
angular.module('todo', [ 'ionic']).controller('todoCtrl',function($scope, $http,$ionicScrollDelegate) {
document.getElementById("cardLi").click();
document.getElementById("sel").style.display = "none";
var goodsName;
$http.get("/goods/getname").then(function(response){
goodsName = response.data.data;
});
$scope.sel = function(){
document.getElementById("topsel").style.display = "none";
document.getElementById("leftMenu").style.display = "none";
document.getElementById("rightContent").style.display = "none";
document.getElementById("sel").style.display = "block";
}
$scope.back = function(){
document.getElementById("topsel").style.display = "block";
document.getElementById("leftMenu").style.display = "block";
document.getElementById("rightContent").style.display = "block";
document.getElementById("sel").style.display = "none";
}
$scope.select = function(keyword){
if(keyword != undefined){
var storage = window.localStorage;
storage.keyword = keyword;
window.location.href = "/result.html";
}
}
$scope.input = function(keyword){
if(keyword != ""){
document.getElementById("cue").style.display = "block";
var showData = new Array();
for(var i = 0; i < goodsName.length; i++){
if(goodsName[i].pinyin.indexOf(keyword) != -1){
showData.push(goodsName[i].name);
}
}
$scope.names = showData;
}else{
document.getElementById("cue").style.display = "none";
}
}
$scope.selected = function(name){
var storage = window.localStorage;
storage.keyword = name;
window.location.href = "/result.html";
}
$http.get("/game/getAll").then(function(response) {
$scope.gameNames = response.data.data;
});
/* */
$scope.isCurrent = function(index,id) {
$ionicScrollDelegate.scrollTop();
$scope.selectMenu=index;
$scope.param=id;
$scope.bg = [];
$scope.bg2 = [];
$scope.bg[index] = 'active';
$scope.bg2[index] = 'active2';
$scope.pages = 1;
$scope.pageNum = 1;
$scope.size=6;
$scope.hasValue = true;
$scope.totalCount = 0;
/* */
if(null == id){
document.getElementById("cardLi").className="active2";
document.getElementById("cardFont").className="active";
$http.get("/ware/getdisplay").then(function(response) {
$scope.cards= response.data.data;
});
/* */
}else{
document.getElementById("cardLi").className="";
document.getElementById("cardFont").className="";
$http.get("/prop/propList?id=" + id+"&pageNum="+$scope.pageNum+"&size="+$scope.size).then(function(response) {
$scope.props = response.data.data.recordset;
$scope.totalCount = response.data.data.recordCount;
if("" == $scope.props){
$scope.gameIcon="";
}else{
$scope.gameIcon=$scope.props[0].gameIcon;
}
});
/* */
$scope.doRefresh = function() {
$scope.size=6;
$http.get("/prop/propList?id=" + id+"&pageNum="+$scope.pageNum+"&size="+$scope.size).then(function(response) {
$scope.props = response.data.data.recordset;
}).finally(function(){
$scope.$broadcast('scroll.refreshComplete');
$scope.hasValue=true;
})
};
$scope.hasMore = function(){
return $scope.hasValue;
}
/* */
$scope.loadMore = function(){
$http.get("/prop/propList?id=" + id+"&pageNum="+$scope.pageNum+"&size="+$scope.size).then(function(response){
$scope.props = response.data.data.recordset;
$scope.size += 6;
if($scope.props.length == $scope.totalCount){
$scope.hasValue=false;
}
});
$scope.$broadcast('scroll.infiniteScrollComplete');
}
}
}
$scope.isCurrent(-1,null);
});