如何在jssor滑块中使用ng-repeat标签

时间:2016-09-02 12:03:44

标签: javascript jquery angularjs jssor

我是角度js和javascript的新手。我必须将jssor集成到我的项目中。为此,我试图使用一组滑块,但ng-repaet似乎不能在jssor中工作,它显示“未定义的错误”。你能帮我吗?

 <div ng-repeat="slide in slides">
  <img u="image" ng-hide="!isCurrentSlideIndex($index)"ng-src="{{slide.img}}" />
 </div>

$scope.slides = [
                  {
                      img : 'https://careersites.s3-us-west-2.amazonaws.com/cmr/6.jpg',
                      thumb: 'http://www.vougageste.com/images/cartazes/1b94e20c15b26e99928401088da4a0bc.jpg'
                  },
                  {
                      img : 'https://careersites.s3-us-west-2.amazonaws.com/cmr/6.jpg',
                      thumb: 'https://diretodasaladeestar.files.wordpress.com/2011/07/encomenda.jpg'
                  },
                  {
                      img : 'https://careersites.s3-us-west-2.amazonaws.com/cmr/6.jpg',
                      thumb: 'http://comofas.com/wp-content/uploads/2012/08/encomendas.jpg',
                  }
              ];
    $scope. currentIndex=0;
     $scope.isCurrentSlideIndex = function (index) {
                return $scope.currentIndex === index;
            };

}

1 个答案:

答案 0 :(得分:0)

您的代码的主要问题是您没有正确设置ng-src,而是在slide.image slide.img时将其设置为<!DOCTYPE html> <html> <head> <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> <link rel="stylesheet" href="style.css" /> <script> var app = angular.module('yourApp', []); app.controller('YourCtrl', function($scope) { $scope.slides = [ { img : 'https://careersites.s3-us-west-2.amazonaws.com/cmr/6.jpg', thumb: 'http://www.vougageste.com/images/cartazes/1b94e20c15b26e99928401088da4a0bc.jpg' }, { img : 'https://careersites.s3-us-west-2.amazonaws.com/cmr/6.jpg', thumb: 'https://diretodasaladeestar.files.wordpress.com/2011/07/encomenda.jpg' }, { img : 'https://careersites.s3-us-west-2.amazonaws.com/cmr/6.jpg', thumb: 'http://comofas.com/wp-content/uploads/2012/08/encomendas.jpg', } ]; $scope.isCurrentSlideIndex = function(idx) { if(idx === 1) return true; return false; }; }); </script> </head> <body ng-app="yourApp"> <div ng-controller="YourCtrl"> <div ng-repeat="slide in slides"> <img u="image" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.img}}" /> </div> </div> </body> </html>

onFormSubmit : function(isFormValid, event) {
  if ($('#agree_to_terms_join').prop('checked')) {
      $('#agree_to_terms_label').parent().removeClass('has-error').find('.error').remove();
  } else {
      if (!$('#agree_to_terms_label').parent().hasClass('has-error')) {
          $('#agree_to_terms_label').parent().addClass('has-error').append(
            '<div class="textbox-alert help-block error"  style="display: block;">' +
              '<div class="type" style="display: block;">Message goes here</div>' +
            '</div>'
          );
      }
      return false;
  }
}

其他一切都应该运作良好这是一个plunker