Question

控制器代码：

var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope, $http) {
    $http.get('data.json').then(function(data) {
        $scope.artist = data;
    });
});

html代码：

<div class="main" ng-controller="myController">

    <ul class="artistlist">

        <li class="artist cf" ng-repeat="x in artist">

            <img ng-src="images/{{x.shortname}}_tn.jpg" alt="Photo of {{x.name}}">

            <div class="info">

                <h2>{{x.name}}</h2>

                <h3>{{x.reknown}}</h3>

            </div>

        </li>

    </ul>

</div>

Answer 1

$http服务具有用于获取详细信息的数据属性。

数据 - {string | Object} - 使用转换函数转换的响应体

像这样更改您的控制器代码

var myApp=angular.module('myApp',[]);

myApp.controller('myController', function($scope,$http){

    $http.get('data.json').then( function(response){
    $scope.artist = response.data;
    });
});

并使用ng-app="myApp"

初始化您的HTML

Answer 2

试试这个：您的控制器

var myApp = angular.module('myApp', [])

myApp.controller("myController", ["$scope", "$http", function ($scope, $http) {
    $http.get("data.json").then(
        function (response) { $scope.artist = response.data },
        function (error) { console.log(error) }
    )
}])

确保检查浏览器的控制台

没有从json-angularjs获取json数据调用带有$ http.get的外部URL

2 个答案: