带过滤器的AngularJS图像轮播

时间:2015-01-30 23:26:54

标签: javascript angularjs angularjs-ng-repeat

我已经花了大约6次运行,虽然我可以让它的许多部分工作,但我似乎无法像我想要的那样使一切运转起来。这是最新的尝试。这最初是用JavaScript编写的,但作为练习我试图将其更改为AngularJS。

模板normal.html:

<section id="container" class="container panels-backface-invisible"  >

 <div id="carousel" class="panels-backface-invisible 3rows">
<figure ng-repeat="movie in movies.data | filterMultiple:{genres:genList,wildcard:wcSearch}" class="folder figure" 
style="transform: {{carousel.rotateFn}}({{carousel.theta*$index}}deg) translateZ({{carousel.radius}}px);" >

</figure></div>
</section>
<div class="searchbox"><label>Wildcard Title Search</label><input type="text" style="width: 100px;" ng-model="wcSearch">
    </div>
 <div style="display: inline-block;
position: absolute;
right: 8%;
bottom: 1px;
width: 15%;"
multi-select 
input-model="genreList"
button-label="name"         
item-label="icon" 
tick-property="ticked" 
selection-mode="multiple"
helper-elements=""
on-open="msOpen( data )"
on-close="msClose( data )"
on-item-click="msClick( data )"
>
</div>

app.js:

angular.module('MovieCarousel', ['ui.router','multi-select'])

        .config(function config($stateProvider, $urlRouterProvider){

    $urlRouterProvider.otherwise('/');
        $stateProvider.state("index",{
            url:"",
            controller:"MovieFlowCtrl",
            templateUrl:"templates/normal.html",
            resolve:{
            movieData:  function($http){
                var promise = $http.get('moviedata.php').
                success(function(data) {
                var mData={};
                mData.count = data.length*2;
                mData.data = data;
                return mData;
                });
                return promise;
                }
            }
        })  
        $stateProvider.state("new",{
            url:"/New",
            controller:"MovieFlowCtrl",
            templateUrl:"templates/New.html",
            resolve:{
            movieData:  function($http){
                var promise = $http.get('moviedata.php?type=N').
                success(function(data) {
                var mData={};
                mData.count = data.length*2;
                mData.data = data;
                return mData;
                });
                return promise;
                }
            }
        })  
    })



.controller('MovieFlowCtrl', function ($scope, $rootScope,  movieData, $filter) {
    $scope.carousel = {};
    $scope.carousel.isHorizontal = true;
    $scope.movies = movieData;
    $scope.carousel.element = document.getElementById('carousel');
    setTimeout( function(){
    document.body.addClassName('ready');
    }, 0);

    $scope.clearSelection=function() {
    $rootScope.genrefilter = [];
    $('#selectable .ui-selected').removeClass('ui-selected');
    }
    $rootScope.genrefilter = [];


$scope.msClick = function(Data) {
    console.log(Data);
     var selectedind = $rootScope.genrefilter.indexOf(Data.name);
      if(selectedind>=0){
      $rootScope.genrefilter.splice(selectedind,1);
      }
      else{
      $rootScope.genrefilter.push(Data.name);
      }
      $scope.carousel.filter();
      // $filter('filterMultiple');
      }


  $rootScope.genreList = [
    { icon: "<img src=/img/Action.png />", name: "Action", ticked: false  },
    { icon: "<img src=/img/Adventure.png>", name: "Adventure", ticked: false },
    { icon: "<img src=/img/Animation.png>", name: "Animation", ticked: false },
    { icon: "<img src=/img/Biography.png />", name: "Biography", ticked: false  },
    { icon: "<img src=/img/Comedy.png />", name: "Comedy",  ticked: false },
    { icon: "<img src=/img/Comic-Book.png />", name: "Comic-Book", ticked: false  },
    { icon: "<img src=/img/Crime.png>", name: "Crime", ticked: false },
    { icon: "<img src=/img/Disaster.png />", name: "Disaster", ticked: false  },
    { icon: "<img src=/img/Drama.png />", name: "Drama",  ticked: false },
    { icon: "<img src=/img/Fantasy.png />", name: "Fantasy", ticked: false  },
    { icon: "<img src=/img/History.png>", name: "History", ticked: false },
    { icon: "<img src=/img/Horror.png>", name: "Horror", ticked: false },
    { icon: "<img src=/img/Music.png />", name: "Music", ticked: false  },
    { icon: "<img src=/img/Musical.png />", name: "Musical",  ticked: false },
    { icon: "<img src=/img/Mystery.png />", name: "Mystery", ticked: false  },
    { icon: "<img src=/img/Romance.png>", name: "Romance", ticked: false },
    { icon: "<img src=/img/Sci-Fi.png />", name: "Sci-Fi", ticked: false  },
    { icon: "<img src=/img/Sport.png />", name: "Sport",  ticked: false },
    { icon: "<img src=/img/Thriller.png />", name: "Thriller", ticked: false  },
    { icon: "<img src=/img/War.png>", name: "War", ticked: false },
    { icon: "<img src=/img/Western.png />", name: "Western", ticked: false  }
    ];


  $scope.msOpen = function( data ) { 
  console.log("open");
draglock = 1;
  }

  $scope.msClose = function( data ) { 
    console.log("closed");
    draglock = 0; }


$rootScope.modify = function(){
if(wheight>=930){
sz1=300;
sz2=2.4;
}
else if(wheight>700 && wheight<929) {
sz1=283;
sz2= 3;
}
else if(wheight>500 && wheight<699) {
sz1=221;
sz2= 3.8;
}
else if(wheight>400 && wheight<499) {
sz1=157;
sz2=5.2;
}
else{
sz1=125;
sz2=6.6;
}
        console.log("Modify");

// sz1 = $(window).width()*0.19;
panelCount = $rootScope.panelCount;
$scope.carousel.sz1 = sz1;
$scope.carousel.panelSize = sz1;
    // if(typeof $scope.carousel.element.children[0] != 'undefined'){$scope.carousel.panelSize = $scope.carousel.element.children[0].clientWidth;}
    $scope.carousel.rotateFn = $scope.carousel.isHorizontal ? 'rotateY' : 'rotateX';
    // console.log(panelCount);

    $scope.carousel.theta = 359 / ((panelCount+mrows));
    theta = $scope.carousel.theta;
    rotateXY = $scope.carousel.rotateFn;
    var sizeadj = 12;
    if(mrows == 1){sizeadj = 0.8;}    
    if(mrows == 2){sizeadj = sz2;}    

    $scope.carousel.radius = ($scope.carousel.panelSize*(mrows+panelCount/mrows))/(2*Math.PI); //Math.round(( $scope.carousel.panelSize/sizeadj) / Math.tan( Math.PI / (($scope.carousel.panelCount+mrows)) ) );
    radius = $scope.carousel.radius;
    $scope.carousel.rotation = Math.round( $scope.carousel.rotation / $scope.carousel.theta ) * $scope.carousel.theta;
    rotation = $scope.carousel.rotation;
    $scope.carousel.rotation = -4;
    $scope.carousel.element.style[ transformProp ] = 'translateZ(-' + radius + 'px) ' + rotateXY + '(' + rotation + 'deg)';

    // if(typeof $scope.carousel.element.children[0] != 'undefined'){$scope.carousel.sz1 = $scope.carousel.element.children[0].clientWidth;}

   }

   $scope.doubleClick = function(movieName){
    console.log("test");
            jQuery.post("/processrequest.php",
                {name: movieName },
                function(response){
                   if(response.length>5){alert(response);}
            });
    }

    $rootScope.toggleCarousel = function(toMod){
    panelCount = $rootScope.panelCount;
        console.log("toggleCarousel");
        if(toMod){return;}
    if(panelCount > 20){
        $('#container').addClass('container');
        $('figure').addClass('figure');
        filtered = 0;
        $rootScope.modify(panelCount);
    }
    else{
        $('figure').attr('style', '');
        $('#carousel').attr('style', 'transform: translate(0px,0px)');
        $('#container').removeClass('container');
        $('figure').removeClass('figure');
        filtered = 1;
        }
    $scope.carousel.element.style[ transformProp ] = 'translateZ(-' + radius + 'px) ' + rotateXY + '(' + rotation + 'deg)';
   }

})



.directive('myDraggable', ['$document', function($document) {
  return function(scope, element, attr) {
    var startX = 0, startY = 0, x = 0, y = 0;

    element.css({
     position: 'relative',
     border: '1px solid red',
     backgroundColor: 'lightgrey',
     cursor: 'pointer'
    });

    element.on('mousedown', function(event) {
      // Prevent default dragging of selected content
      event.preventDefault();
      startX = event.pageX - x;
      startY = event.pageY - y;
      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {
      y = event.pageY - startY;
      x = event.pageX - startX;
      element.css({
        top: y + 'px',
        left:  x + 'px'
      });
    }

    function mouseup() {
      $document.off('mousemove', mousemove);
      $document.off('mouseup', mouseup);
    }
  };
}])


.filter('filterMultiple',["$rootScope", '$filter',  function ($rootScope,$filter) {
return function (items, keyObj) {


    var wcSearch = keyObj.wildcard;
    var genres = keyObj.genres;
    var filterObj=[];
    for(var i=0;i<items.length;i++){

    var filtered = true;

    if(typeof wcSearch === 'undefined'){}
    else if(wcSearch.length > 0){
    if(wcSearch.toUpperCase().substring(0,wcSearch.length) != items[i].title.toUpperCase().substring(0,wcSearch.length) && wcSearch.toUpperCase().substring(0,wcSearch.length) != items[i].sortTitle.toUpperCase().substring(0,wcSearch.length)){filtered = false;}
    }

    if(filtered == true){

        for(var x=0;x<$rootScope.genrefilter.length;x++){
            if(items[i].genres.indexOf($rootScope.genrefilter[x])<0){filtered = false;}
        }   
    }

    if(filtered == true){
        filterObj.push(items[i]);
    }

    }

*******Disabled due to infinite loop
    // var ticked=[];
    // var genreObj={};
    // var $tempGenre=[];
    // $tempGenre.genreList = $rootScope.genreList;
    // for (var i=0;i<$tempGenre.genreList.length;i++){
        // ticked[$tempGenre.genreList[i].name]=$tempGenre.genreList[i].ticked;
    // }
    // $tempGenre.genreList=[];
      // if(typeof filterObj !== 'undefined'){
    // for (var i=0;i<filterObj.length;i++){
        // for (var z=0;z<filterObj[i].genres.length;z++){
            // if($tempGenre.genreList.map(function(e) { return e.name; }).indexOf(filterObj[i].genres[z])==-1)
            // {
            // if(filterObj[i].genres[z] !=""){
                // genreObj = {icon: "<img src=/img/"+filterObj[i].genres[z]+".png />", name: filterObj[i].genres[z], ticked: ticked[filterObj[i].genres[z]] };
                // $tempGenre.genreList.push(genreObj);
                // }
            // }
        // }
    // }
    // }
    // $tempGenre.genreList.sort();
    var toModify=false;
    if($rootScope.panelCount == filterObj.length){toModify=true;}
    console.log($rootScope.panelCount+","+filterObj.length);
    $rootScope.panelCount = filterObj.length;
     $rootScope.toggleCarousel(toModify);
    $rootScope.genreList = $tempGenre;

    return filterObj;
}
}])


.filter('unique', function() {
   return function(input, key) {
        var unique = {};
        var uniqueList = [];
        for(var i = 0; i < input.length; i++){
            if(typeof unique[input[i][key]] == "undefined"){
                unique[input[i][key]] = "";
                uniqueList.push(input[i]);
            }
        }
        return uniqueList;
    };
})


.directive('resize', function($window) {
    return function (scope, element, attr) {

      var w = angular.element($window);
        scope.$watch(function () {
            return {
                'h': w.height(), 
                'w': w.width()
            };
        }, function (newValue, oldValue) {
            scope.windowHeight = newValue.h;
            scope.windowWidth = newValue.w;
            scope.resizeWithOffset = function (offsetH) {

                scope.$eval(attr.notifier);

                return { 
                    'height': (newValue.h - offsetH) + 'px'
                };
            };

        }, true);

        w.bind('resize', function () {
            scope.$apply();
       });
    }
})

显然,我对AngularJS很新,而且我可能做错了什么。我已经搜索了类似的解决方案来学习,但却找不到任何正在做的事情。我现在面临的主要问题是,如果我将限制类型的代码仅包含在电影结果子集中可用的代码中,它无限循环,无论我采取哪种角度,我似乎都无法获得一切都在一起工作。一些指导将非常受欢迎,即使它只是为了推荐一个更好的结构,我确定我在控制器中投入太多其他失败。

其他未完成的部分:   - 针对每种类型的内容的视图   - 重新调整窗口大小的元素   - 拖动和滚动行为

0 个答案:

没有答案