Question

因此，作为Free Code Camp的一部分，我一直在研究两个简单的Angular应用程序，而且我的结果好坏参半。在第一个应用程序中，一切似乎都运行正常。我进行$http.get()调用，返回一个对象数组，并且我可以使用ng-repeat（ARRAY中的键）用数据填充我的页面。可以在此处找到该笔：http://codepen.io/StephenMayeux/pen/ZbBgap

我的第二个应用实际上是相同的（进行API调用，这次使用的是维基百科），但它使用$http.json()代替GET，因为需要JSONP（而不是CORS）来获取任何数据维基百科。长话短说，我能够解析这些数据并将其推送到数组。

我有一个很好的对象数组，我应该能够通过ng-repeat进行迭代......但是没有任何事情发生。这是该笔的链接，或者您可以查看以下代码： http://codepen.io/StephenMayeux/pen/WQRawr

(function() {
  var app = angular.module('wikipedia', []);

  app.controller('WikiController', ['$http','$scope', function($http, $scope) {
    $scope.search = { text: '' };
    var api = 'http://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=';
    var apiEnding = '&callback=JSON_CALLBACK';
    var pageUrl = 'http://en.wikipedia.org/?curid=';


    $scope.search = function() {
      var final = [];
      $http.jsonp(api + $scope.search.text + apiEnding).success(function(data) {
        var results = data.query.pages 
        angular.forEach(results, function(v,k) {
          final.push({title: v.title, body: v.extract, page: pageUrl + v.pageid})
        })
        console.log(final);

      });
    };    
  }]);

})();

<html ng-app="wikipedia">

<body ng-controller="WikiController">
  <div class="container">
    <h1>Wikipedia Search Engine</h1>
    <form class="form-inline" novalidate>
      <div class="form-group">
        <label class="sr-only" for="searchInWikipedia">Search Wikipedia by using this textbox</label>
        <input type="text" class="form-control" ng-model="search.text" placeholder="What do you want to learn about today?">
      </div>
      <button type="submit" class="btn btn-primary" ng-click="search()"><span class="glyphicon glyphicon-search"> Search</span></button>
    </form>
    <div >
      <div id="search-results" ng-repeat="key in final">
        <h3>{{key.title}}</h3>
        <p>{{key.body}}</p>
      </div>
    </div>
  </div>
</body>

</html>

我有：

1）检查拼写错误。

2）打印到控制台，我肯定得到了一系列对象。

3）仅使用Angular，而没有其他类似jQuery的库可能与我的代码冲突。

任何想法或指示？

Answer 1

这是一支笔：http://codepen.io/anon/pen/gambae

  $scope.final = [];

您需要添加要在屏幕上显示的内容。

ng-repeat在一个应用程序中起作用，但在另一个应用程序中起作用

1 个答案: