javascript - Control does not go to expected line in angularjs controller -
can please tell me problem angularjs controller? part " var userdata " not have effect in browser. if write alert before ,there no alert box when page loads.may missing something.
angular.module('gbuyref').controller('homecontroller', function ($scope, $window, $http, $cookies) { 'use strict'; $scope.fname = $cookies.fname; $scope.init = function () { var data = "[{ \"productid\" : \"9970qypmnauui\", \"productname\" : \"micca speck 1080p full-hd ultra portable\", \"imageurl\" : \"../../s3/images/99738a3ay55hn_resized.jpg\" }]"; $scope.products = json.parse(data); var products_page = []; var products_pages = []; var count = 4; $scope.products_pages = products_pages; for(var i=4;i<$scope.products.length;i++){ if(count > 1){ products_page.push($scope.products[i]); count--; if($scope.products.length === i+1){ products_pages.push(products_page); return; } } else{ products_page.push($scope.products[i]); products_pages.push(products_page); products_page = []; count = 4; } } var userdata = "[{ \"productid\" : \"9970dlxevoq01\", \"productname\" : \"google chromecast\", \"imageurl\" : \"../../s3/images/9973grkfewuu1_resized.jpg\" }]"; $scope.userlist = json.parse(userdata); var user_products_page = []; var user_products_pages = []; var count_1 = 4; $scope.user_products_pages = user_products_pages; for(var j=4;j<$scope.userlist.length;j++){ if(count_1 > 1){ user_products_page.push($scope.userlist[j]); count_1--; if($scope.userlist.length === j+1){ user_products_pages.push(user_products_page); return; } }else{ user_products_page.push($scope.userlist[j]); user_products_pages.push(user_products_page); user_products_page = []; count_1 = 4; } } } $scope.logout = function() { $cookies.fname = ""; $window.location.href="/static/html/login.html"; } }); here html:
<!doctype html> <html lang="en" ng-app="gbuy"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>gbuy-product details</title> <!-- bootstrap --> <link href="../css/external/css/bootstrap.min.css" rel="stylesheet"> <link href="../css/gbuy/gbuy.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=patua+one' rel='stylesheet' type='text/css'> <script src="../js/external/bootstrap/jquery-1.11.0.min.js"></script> <script src="../js/external/jquery-ui/ui/jquery-ui.js"></script> <script src="../js/external/bootstrap/bootstrap.js"></script> <script src="../js/external/angular/angular.js"></script> <script src="../js/external/angular/angular-cookies.js"></script> <script src="../js/gbuy/gbuy.js"></script> <script src="../js/gbuy/gbuy-ang-controller-test.js"></script> <script src="../js/gbuy/gbuy-ang-directives.js"></script> <script src="../js/external/angular/angular-cookies.js"></script> <script> $(function() { $('#carousel_home').carousel(); }); $(function() { $('#carousel_user').carousel(); }); $('.carousel .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendto($(this)); if (next.next().length>0) { next.next().children(':first-child').clone().appendto($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendto($(this)); } }); </script> </head> <body ng-controller="homecontroller" ng-init="init()"> <div class="col-xs-11" style="width:700pt; height:150pt; margin-top:5px; "> <div class="row " style="margin-left:75pt;"> <label class="text-center" style="margin-top:10pt;font-size:14pt;">highlighted deals</label> </div> <div id ="carousel_home" class="carousel slide " > <div class="carousel-inner text-center" style="margin-left:75px;"> <div class="item active"> <div class="col-xs-3 " style="margin-right:-50px;" ng-repeat="(key, value) in products.slice(0, 4) track $index"> <img src= {{value.imageurl}} alt="no image"/> <a href="#"><h6>{{value.productname}}</h6></a> </div> </div> <div class="item" ng-repeat="page in products_pages"> <div class="col-xs-3 " style="margin-right:-50px;" ng-repeat="image in page"> <img src= {{image.imageurl}} alt="no image" /> <a href="#"><h6>{{image.productname}}</h6></a> </div> </div> </div> <!--end of carousel-inner--> <a class="left carousel-control pull-left" href="#carousel_home" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control pull-right" href="#carousel_home" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div><!--end of carousel_home--> </div> <div class="col-xs-11" style="width:700pt; height:500pt; margin-top:5px; "> <div class="row " style="margin-left:75pt;"> <label class="text-center" style="margin-top:10pt;font-size:14pt;">recommended deals</label> </div> <div id ="carousel_user" class="carousel slide " > <div class="carousel-inner text-center" style="margin-left:75px;"> <div class="item active"> <div class="col-xs-3 " style="margin-right:-50px;" ng-repeat="(key, value) in userlist.slice(0, 4) track $index"> <img src= {{value.imageurl}} alt="no image"/> <a href="#"><h6>{{value.productname}}</h6></a> </div> </div> <div class="item" ng-repeat="page in user_products_pages"> <div class="col-xs-3 " style="margin-right:-50px;" ng-repeat="image in page"> <img src= {{image.imageurl}} alt="no image" /> <a href="#"><h6>{{image.productname}}</h6></a> </div> </div> </div> <!--end of carousel-inner--> <a class="left carousel-control pull-left" href="#carousel_user" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control pull-right" href="#carousel_user" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div><!--end of carousel_user--> </div> </body> </html>
got it, have return statement in first loop's second. hence controller returns there.
Comments
Post a Comment