Question

这是我学校的任务。我是angularjs的新手。在这种情况下，我试图在angularjs中实现从数据库中检索图像的自动幻灯片放映。我不知道怎么做。请帮助我。我尝试了多个教程，但所有这些都不适合我。

这是我的角度控制器。

appGM.controller('bannerCtrl', ['$scope', '$http', 'urls', function ($scope, $http, urls) {
var request = $http({
    method: 'GET',
    url: urls.api + 'Banner/LeftBanner'

}).success(function (data, status) {

    console.log(data);
    console.log(JSON.stringify(data));
    console.log(JSON.parse(JSON.stringify(data)));

    $scope.BottomBanner = angular.fromJson(data);

})
 .error(function (error) {
     $scope.status = 'Unable to load dog images: ' + error.message;
     console.log($scope.status);
 });

我的HTML：

 <div class="row">
         <div class="col-sm-3 sidenav" ng-repeat="d in BottomBanner">
                        <img ng-src="{{d.bottomBannerPath}}">
    </div>

这是我的json：

{
    "bottomBannerId": 1,
    "bottomBannerPath": "Content/Banner/banner.jpg",
    "bottomBannerLocation": 2
  },
  {
    "bottomBannerId": 2,
    "bottomBannerPath": "Content/Banner/banner1.jpg",
    "bottomBannerLocation": 2
  },
  {
    "bottomBannerId": 3,
    "bottomBannerPath": "Content/Banner/banner2.jpg",
    "bottomBannerLocation": 2
  },
  {
    "bottomBannerId": 4,
    "bottomBannerPath": "Content/Banner/banner3.jpg",
    "bottomBannerLocation": 2
  },
  {
    "bottomBannerId": 5,
    "bottomBannerPath": "Content/Banner/banner4.jpg",
    "bottomBannerLocation": 2
  },
  {
    "bottomBannerId": 6,
    "bottomBannerPath": "Content/Banner/banner5.jpg",
    "bottomBannerLocation": 2
  }
]

这就是我所需要的：

Answer 1

我创建的可重复使用 Directive 是为了实现您的功能，简单且不使用外部插件

我做的很简单，我只使用src attribute

动态更改了图片代码的$interval

function updateTime() {
  attrs.$set('src',scope.images[i].image);
  i ++
  if(i == scope.images.length)
  {
    i = 0
  }
}

var i = 0;
stopTime = $interval(updateTime, 500);

以下是代码的重要部分：

＆＃13;

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-interval-service-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  

  
</head>
<body ng-app="intervalExample">
  <script>
  angular.module('intervalExample', [])
    .controller('ExampleController', ['$scope', '$interval',
      function($scope, $interval) {
        
        $scope.images = [{
    image: "http://img4.wikia.nocookie.net/__cb20131121235548/leagueoflegends/images/d/d5/Executioner_mastery_s3.png",
    currentPoint: "0",
    endPoint: "1"
  }, {
    image: "http://img4.wikia.nocookie.net/__cb20131121235640/leagueoflegends/images/e/e9/Fury_mastery_s4.png",
    currentPoint: "0",
    endPoint: "4"
  }, {
    image: "http://img2.wikia.nocookie.net/__cb20131121235650/leagueoflegends/images/f/f5/Sorcery_mastery_s4.png",
    currentPoint: "0",
    endPoint: "4"
  }, {
    image: "http://img4.wikia.nocookie.net/__cb20131121235724/leagueoflegends/images/5/58/Butcher_mastery_s4.png",
    currentPoint: "0",
    endPoint: "1"
  }]
    
      }])
    
    .directive('myImages', ['$interval', 'dateFilter',
      function($interval, dateFilter) {
        // return the directive link function. (compile function not needed)
        return function(scope, element, attrs) {
    
          function updateTime() {
            attrs.$set('src',scope.images[i].image);
            i ++
            if(i == scope.images.length)
            {
              i = 0
            }
          }

          // watch the expression, and update the UI on change.
          
          var i = 0;
          stopTime = $interval(updateTime, 500);

          // listen on DOM destroy (removal) event, and cancel the next UI update
          // to prevent updating time after the DOM element was removed.
          element.on('$destroy', function() {
            $interval.cancel(stopTime);
          });
        }
      }]);
</script>

<div>
  <div ng-controller="ExampleController">
       <img my-images images="images"/>
    <hr/>

  </div>
</div>
</body>
</html>

＆＃13;

请运行以上代码

（OR）

Here is a working DEMO

使用angularjs

1 个答案: