Question

所以我可以用不到十行的代码在其他方面做到这一点，但我只想要Angular Way。欢迎任何建议和方法。

我有一些图像和一组无线电输入按钮来控制这里显示的内容：

CSS：

.slide {
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
    opacity: 0;
}

.slide.showSlide {
    opacity: 1;
}

HTML：

<section class="slideshow" ng-controller="sliderCtrl">
    <div ng-repeat="slide in slides | orderObjectBy:'sort'" sort-order="{{slide.sort}}" class="slide" ng-class="{ 'showSlide': $index == selectedIndex }"><img ng-src="{{slide.src}}" alt="{{slide.alt}}" /></div>
    <aside id="slideControls" ng-model="slides.input">
        <input ng-repeat="slide in slides | orderObjectBy:'sort'" name="{{slide.alt}}" class="slideCtrl"  type="radio" ng-click="slideShow($index)" />
    </aside>
</section>

控制器：

app.controller('sliderCtrl', function ($scope, $http, $element, $interval) {
    $http.get('data/slides.json')
    .success(function(data, status, headers, config) {
        $scope.slides = data;
        $scope.selectedIndex = 0;
        $scope.slideShow = function ($index) {
            console.log($index);
            $scope.selectedIndex = $index;
        }
        var theShow;
        $scope.$watch("slides.input", function(value) {
            var i = 1,
                iMax = $element.children(0).children('.slideCtrl').length - 1,
                elements = $element.children(0).children('.slideCtrl');
            theShow = $interval(function() {
                $scope.slideShow(i);
                if (i<iMax) i++;
                else i = 0; 
            }, 3000);   
        }); 
    })
    .error(function(data, status, headers, config) {
        console.log(data+', '+status+', '+headers+', '+config);
    });
});

编辑：

所以我按照某人建议的方式实现了幻灯片，但它仍然没有实现我想要的目标。基本上，我还需要它来选择我的单选按钮，而不是调用ng-click功能，因此我需要它来实际触发单选按钮本身的单击事件。我能够定位元素以获得长度，但是当我尝试时：

$scope.slideShow(i).triggerhandler('click');

我回来了＆gt;＆gt;＆gt;无法阅读属性＆quot; triggerHandler＆＃39;未定义的

Answer 1

您每秒都在循环浏览所有幻灯片控件。并且您可能希望每秒循环一次每个幻灯片控件。这可能是你想要做的：

var counter = 0;
var sliderOn = $interval(function() {
    var tar = angular.element('#slideControls');
    counter = (counter < tar.children.length) ? counter+1 : 0;          
    console.log(tar.children[counter]);
    // Click code goes here I suppose
}, 1000);

简单角度幻灯片：无法在输入类型=＆＃34; radio＆＃34;

1 个答案: