Javascript AngularJS网页，持续加载_Javascript_Html_Css_Angularjs_Twitter Bootstrap

Javascript AngularJS网页，持续加载

javascript html css angularjs twitter-bootstrap

Javascript AngularJS网页，持续加载,javascript,html,css,angularjs,twitter-bootstrap,Javascript,Html,Css,Angularjs,Twitter Bootstrap,我正在使用AngularJS引导型Typeahead插件。每当我尝试加载我的页面时，页面就开始不断加载。这是我正在使用的代码： HTML: <!DOCTYPE html> <html ng-app="myApp"> <head> <script src="angular.js"></script> <script src="ui-bootstrap-tpls-0.11.0.min.js"></scr

我正在使用AngularJS引导型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>

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

JS:

<!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>

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

angular.module（'myApp'，['ui.bootstrap']）；
函数SearchBarCtrl（$scope）{
$scope.selected=未定义；
var searchList={
“名单”：{
“频道”：[
“技术”，
“游戏”，
“设计”
],
“类别”：[
“技术”，
“游戏”，
“设计”
]
}
};
var channels=searchList.list.Channel；
变量类别=searchList.list.Category；
$scope.searchList=[]；
对于（变量i=0；i<（channels.length>categories.length）？channels.length:categories.length；i++）{
if（通道类型[i]！=“未定义”）
$scope.searchList.push（{'name'：channels[i]，'favicon'：'img/techcrunch.ico'}）；
if（类别类型[i]！==‘未定义’）
$scope.searchList.push（{'name'：categories[i]，'favicon'：'img/techcrunch.ico'}）；
}
}

正在发生的事情：我已将所有脚本和CSS文件保存在同一目录中，并通过XAMPP服务器运行它们。每当我试图打开我的网页时，页面会不断地在Chrome上显示，有时会在状态栏上显示

等待plus.google.com

或

等待www.google.com.pk

和类似的无关联URL

应该发生什么：

应该出现一个文本框，它应该实现AngularJS Boostrap Typeahead插件。基本上，应该加载页面。

问题在于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' });
 }

for（变量i=0；i


问题在于频道的类型[i]！='“未定义”和类别类型[i]！='未定义的“行”。我用功能上等价的东西替换了它们。
我写了if（**typeof**channels[I]！==**'**未定义**'**）
typeof
返回一个我猜是的字符串。：）那么现在一切都按预期进行了？它在我这方面起作用，有了以上的变化。