javascript - Angular 1.6 $http 无错误响应

标签 javascript angularjs json http

function() {
        "use strict";
        angular.module("App").controller("LabCtrl", ["$rootScope", "$scope", "$state", "$http", function($scope, a, b, $http) {

            a.labs = []; //declare an empty array

            $http({
              method: 'GET',
              url: 'datalab.json'
            }).then(function (response){
                a.labs = response.data;
            },function (error){
                console.log(error);
            });

        }])
    }.call(this),

我的 html:

<li class="project-item" ng-repeat="lab in labs">   
            <img alt="img title" ng-src="{{lab.img}}"> 
            <span><strong>{{lab.title}}</strong><br>
            {{lab.desc}}</span> 
    </li>

如果不按 $index 进行跟踪,我会得到大约 10000 个结果?我的 .json 中只有 10 个条目。 我的错误日志也不起作用。我得到文件 datalab.json 的 200 OK 状态,但该文件名为 data/lab.json

实验室.json

[
  {
    "title": "Lab #1",
    "desc": "iOS App Design.",
    "img": "http://lorempixel.com/774/600/sports/"
  },
  {
    "title": "Lab #2",
    "desc": "iOS app.",
    "img": "http://lorempixel.com/774/600/abstract/"
  },
  {
    "title": "Lab #3",
    "desc": "App Design.",
    "img": "http://lorempixel.com/774/600/cats/"
  },
  {
    "title": "Lab #4",
    "desc": "Website Design.",
    "img": "http://lorempixel.com/774/600/fashion/"
  },
  {
    "title": "Lab #5",
    "desc": "Illustration.",
    "img": "http://lorempixel.com/774/600/nature/"
  },
  {
    "title": "Lab #6",
    "desc": "Dribbble Concepts",
    "img": "http://lorempixel.com/774/600/technics/"
  },
  {
    "title": "Lab #7",
    "desc": "Mac OS App.",
    "img": "http://lorempixel.com/774/600/transport/"
  },
  {
    "title": "Lab #8",
    "desc": "Website Design.",
    "img": "http://lorempixel.com/774/600/city/"
  },
  {
    "title": "Lab #9",
    "desc": "Website / Dashboard Design.",
    "img": "http://lorempixel.com/774/600/nightlife/"
  },
  {
    "title": "Lab #10",
    "desc": "Website Design.",
    "img": "http://lorempixel.com/774/600/food/"
  }
]

也许我的 .htaccess 是问题所在? (必须使用 https)我有 pushstate 链接等 NewHomepage/labor/NewHomepage/kontakt/ .htaccess:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) index.html [L]

最佳答案

我认为您错误地编写了 Controller ,您缺少主应用程序模块的依赖项。要使用“$state”,您需要注入(inject)“ngRoute”。 这是您的代码工作:

    (function() {
        "use strict";
         angular.module("App",[]).controller("LabCtrl", ["$rootScope", "$scope", 
        "$http", function($rootScope,$scope, $http) {

        $scope.labs = []; //declare an empty array

        $http({
          method: 'GET',
          url: 'datalab.json'
        }).then(function (response){

            $scope.labs = response.data;
            // added this log after removing the "track by $index" in 
            // your html
            console.log(response.data.length);
        },function (error){
            console.log(error);
        });

    }])
})();

关于javascript - Angular 1.6 $http 无错误响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45263790/

相关文章:

jquery - 如何通过 WWW::Mechanize::Firefox 调用 jQuery 或 Angular 函数?

angularjs - 全局设置 angularjs $http header

java - 将具有多个对象的 JSON 字符串转换为类实例

ruby-on-rails - 在另一个中包含另一个 jbuilder 模板

javascript - 标准化 JSON 对象键名

javascript - 删除 node.js 数组中对象的正确方法?

javascript - jQuery:在一个元素上切换类,从所有其他元素中删除相同的类

javascript - 脚本未在 Firefox 中运行,但在 Chrome 中运行

javascript - ReferenceError:未定义 GM_xmlhttpRequest

angularjs - 如何使用 Angular 获取登录用户?