Question

我刚开始使用AngularJS，并且一直在尝试使用＆＃34;即时搜索＆＃34;模块。我没有将.json数据硬编码到控制器中，而是想使用AJAX调用来获取单独的.json文件。

带有硬编码项目的Angular Instant Search Controller Javascript代码：

function InstantSearchController($scope){

$scope.items = [
    {
        url: 'http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/',
        title: '50 Must-have plugins for extending Twitter Bootstrap',
        image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/07/featured_4-100x100.jpg'          
    },
    {
        url: 'http://tutorialzine.com/2013/08/simple-registration-system-php-mysql/',
        title: 'Making a Super Simple Registration System with PHP and MySQL',
        image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/08/simple_registration_system-100x100.jpg'
    },
    {
        url: 'http://tutorialzine.come/2013/08/slideout-footer-css/',
        title: 'Create a slide-out footer with this neat z-index trick',
        image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/08/slide-out-footer-100x100.jpg'
    },
    {
        url: 'http://tutorialzine.com/2013/06/digital-clock/',
        title: 'How to Make a Digital Clock with jQuery and CSS3',
        image: 'http://cdn.tutorialzine.com/wp-content/uploads/2013/06/digital_clock-100x100.jpg'
    }


];


}

我想替换＆＃39; $ scope.items＆＃39;使用AJAX调用.json文件。我知道这涉及到使用$ http＆＃39;作为参数，但我不确定如何正确地进行此调用。

Answer 1

Angular以完整的API参考和完整的工作示例的演练教程的形式提供了出色的文档。

请参阅此处$http的文档：

https://docs.angularjs.org/api/ng/service/$http

如何在示例应用程序中使用它：

https://docs.angularjs.org/tutorial/step_05#controller

基本上，使用$http的代码类似于：

$scope.items = $http.get('path/to/your.json').success(function(data) {
  $scope.items = data;
});

AngularJS - 使用带有JSON文件的即时搜索

1 个答案: