AngularJS webpage, continuously loading

Question

I am using AngularJS Bootstrap Typeahead plugin. Whenever I try to load my page the page starts to load continuously. This is the code I am using:

HTML:

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script src="angular.js"></script>
    <script src="ui-bootstrap-tpls-0.11.0.min.js"></script>
    <script src="example.js"></script>
    <link href="bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <script type="text/ng-template" id="customTemplate.html">
      <a>
          <img ng-src="{{match.model.favicon}}" width="16">
          <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
      </a>
    </script>
    <div class='container-fluid' ng-controller="SearchBarCtrl">
        <input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="searchItem as searchItem.name for searchItem in searchList | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control">
    </div>
  </body>
</html>

JS:

angular.module('myApp', ['ui.bootstrap']);
function SearchBarCtrl($scope) {
  $scope.selected = undefined;
  var searchList = {  
    "list":{  
      "Channel":[  
        "Tech",
        "Gaming",
        "Design"
      ],
      "Category":[  
        "Tech",
        "Gaming",
        "Design"
      ]
    }
  };
  var channels = searchList.list.Channel;
  var categories = searchList.list.Category;
  $scope.searchList = [];
  for(var i = 0; i < (channels.length > categories.length) ? channels.length : categories.length; i++) {
    if(typeof channels[i] != 'undefined')
      $scope.searchList.push({'name':channels[i],'favicon':'img/techcrunch.ico'});
    if(typeof categories[i] !== 'undefined')
      $scope.searchList.push({'name':categories[i],'favicon':'img/techcrunch.ico'});
  }
}

What is happening:

I have saved all of the scripts and the CSS files in the same directory and running them through XAMPP server. Whenever I try to open up my webpage, the page laods continuously, sometimes, on Chrome, it says Waiting for plus.google.com or Waiting for www.google.com.pk and similar relation-less URLS, on the status bar.

What should happen:

A textbox should appear which should be implementing the AngularJS Boostrap Typeahead plugin. Pretty much, the page should be loaded.

m.casey · Accepted Answer · 2014-07-16 18:59:07Z

1

The problem lies in the for loop. Instead of what you have, use this instead:

 for (var i = 0; i < length; i++) {
        if (channels[i] !== undefined)
            $scope.searchList.push({ 'name': channels[i], 'favicon': 'img/techcrunch.ico' });
        if (categories[i] !== undefined)
            $scope.searchList.push({ 'name': categories[i], 'favicon': 'img/techcrunch.ico' });
 }

The problematic part was the typeof channels[i] != 'undefined' and typeof categories[i] !== 'undefined' lines. I've replaced them with something functionally equivalent.

answered Jul 16, 2014 at 18:59

m.casey

2,60919 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohammad Areeb Siddiqui Over a year ago

I wrote if(**typeof** channels[i] !== **'**undefined**'**). typeof returns a string I guess. :)

m.casey Over a year ago

So everything is working as expected now? It works on my end with the above changes.

Collectives™ on Stack Overflow

AngularJS webpage, continuously loading

What is happening:

What should happen:

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What is happening:

What should happen:

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related