将我的 json 文件中的数据放入 ui-bootstrap 轮播答案

【问题标题】：put data from my json file in ui-bootstrap carousel将我的 json 文件中的数据放入 ui-bootstrap 轮播
【发布时间】：2019-04-15 02:53:18
【问题描述】：

我想将 http json 文件放入 slides.push() 中。所以在这里我使用了 ui.bootstrap.carousel ，我想在我的 html 中设置图像。

那我该怎么做。有人能帮我吗？

.controller('dashboardCtrl', ['$scope', '$http', '$location','$timeout', function ($scope, $http, $location, $timeout) {
        $http.get('json/login.json').success(function (data) {
          $scope.info = data.profile[0];
          $scope.pic = data.offers[0];
          console.log($scope.pic);
        })

        $scope.myInterval = 500;
        $scope.noWrapSlides = false;
        $scope.active = 0;
        var slides = $scope.slides = [];
        var currIndex = 0;

        $scope.addSlide = function() {
          // var newWidth = 600 + slides.length + 1;
          slides.push({
            image: '../image/slide1.png',
            id: currIndex++
          },
          {
            image: '../image/slide2.png',
            id: currIndex++
          },
          {
            image: '../image/slide3.png',

            id: currIndex++
          }

          );

        };

【问题讨论】：

标签： angularjs angularjs-directive angular-ui-bootstrap

【解决方案1】：

只需将您的 slides.push 放入 $http.get 函数，如下所示：

$scope.get = function() {
        $http({
                method: 'GET',
                url: 'json.json'
            })
                .then(function successCallback(data){
                    $scope.img = data.data;
                       slides.push({
                        image: $scope.img[0].url,
                        id: currIndex++
                      });
                }, function errorCallback(response){
                    console.log(response);
                    console.log('error');
                });
      }

您还可以通过某种loop 从json.json 添加所有url。在我的代码中，我首先从json 推送url。这是plunker：http://plnkr.co/edit/27RvnjGCT5i0MCNooZeB?p=preview

【讨论】：