发生了什么：

Question

我正在使用AngularJS Bootstrap Typeahead插件。每当我尝试加载页面时，页面都会开始连续加载。这是我正在使用的代码：

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'});
  }
}

发生了什么：

我已将所有脚本和CSS文件保存在同一目录中，并通过XAMPP服务器运行它们。每当我尝试打开我的网页时，该页面会在Chrome上连续显示，在状态栏上显示Waiting for plus.google.com或Waiting for www.google.com.pk以及类似的无关系网址。

应该发生什么：

应该出现一个应该实现AngularJS Boostrap Typeahead插件的文本框。差不多，应该加载页面。

Answer 1

问题在于for循环。而不是你拥有的，而是使用它：

 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' });
 }

有问题的部分是频道类型[i]！=＆＃39; undefined＆＃39;和类别[i]！==＆＃39; undefined＆＃39;线。我用功能相当的东西替换了它们。

AngularJS网页，不断加载

发生了什么：

应该发生什么：

1 个答案: