Question

我尝试使用angular-materialize创建一个滑块，读取http://krescruz.github.io/angular-materialize/，它们只是将滑块代码放在div中，它将从angular-materialize.js调用指令。

home.html的：

<div class="slider fullscreen z-depth-1" slider>
<ul class="slides">
    <li>
        <img src="assets/img/illustration/parsprototo/ppt2.jpg"></img>
    </li>
    <li>
        <img src="assets/img/illustration/kenmeri/kenmeri_marker.jpg"></img>
    </li>
    <li>
        <img src="assets/img/illustration/bagua/BG1.jpg"></img>
    </li>
</ul>

完美地工作。

现在我想尝试ng-repeat并使用ng-src从JSON获取数据，它不起作用，只是灰色背景。

home.html with ng-repeat和ng src

<div class="slider fullscreen z-depth-1" slider>
    <ul class="slides">

        <li ng-repeat="slide in slidesData">
            <img ng-src="{{slide.image}}"></img>
        </li>
  </ul>
</div>

不能正常工作。

controller.js

var appControllers = angular.module('appControllers', []);
appControllers.controller('HomeController', ['$scope', '$http',
    function ($scope, $http){
        $http.get('assets/json/home.json').success(function(data){
            $scope.slidesData = data;
        });
    }
]);

home.json

[
    {
        "image" : "assets/img/illustration/mudra/mudra1.jpg",
        "headingText" : "This is our big Tagline! 1",
        "sloganText" : "Here's our small slogan."
    },
    {
        "image" : "assets/img/illustration/parsprototo/ppt2.jpg",
        "headingText" : "This is our big Tagline! 2",
        "sloganText" : "Here's our small slogan."
    },
    {
        "image" : "assets/img/illustration/kenmeri/kenmeri_marker.jpg",
        "headingText" : "This is our big Tagline! 3",
        "sloganText" : "Here's our small slogan."
    },
    {
        "image" : "assets/img/illustration/bagua/BG1.jpg",
        "headingText" : "This is our big Tagline! 3",
        "sloganText" : "Here's our small slogan."
    }
]

什么可能是错的？谢谢。

修改

new controller.js

var appControllers = angular.module('appControllers', []);
appControllers.controller('HomeController', ['$scope', '$http', '$log'  ,
    function ($scope, $http, $log){
        $http.get('assets/json/home.json').success(function(data){
            $scope.slidesData = data;
            $scope.$log = $scope.slidesData ;
        });
    }
]);

我修改controller.js以在$ scope.slidesData上写入json，如果它已加载，但在我的控制台中没有写入。：（

也没有错误。

修改

控制台在我更改为console.log($scope.slidesData)

时工作

the console looks like this

Answer 1

我希望您可以从本地目录加载数据。你能查一下路径＆assets; jina / home.json＆＃39;或者你可以分享你的文件夹结构。我可以帮助你。

滑块角度上的ng-repeat / ng-src实现不起作用

1 个答案: