通过单击按钮更改 ng-repeat 中 $index 选择的 class

Question

我有一个 ng-repeat 项目列表。当您点击它们时，会添加一个 class 来改变图像的外观。我现在想在单击左右按钮时实现这一点。因此，您可以单击左键将 class 放在左侧，因为选择了左键，然后单击右键滚动浏览并将 class 添加到右侧。

html:

<div class="options">
    <div ng-repeat="colour in colours" class="swatch-option" ng-class="{ chosen: $index === index }">
        <div class="swatch-title" ng-show="$index === index"><p class="text"> {{colour.thumbData.description | smcl10n}} </p></div>
        <img ng-click="changeColour($index);" ng-src="{{colour.thumbMedia | smcmediaurl}}" class="colour-swatches" />
    </div>
</div>


        <div class="arrow left small" ng-click="changeColour($index)(-1)" ng-src="{{colour.thumbMedia | smcmediaurl}}"></div>
        <div class="arrow right small" ng-click="changeColour($index)(1)" ng-src="{{colour.thumbMedia | smcmediaurl}}"></div>

js:

        $scope.index = 0;
        $scope.selected = $scope.colours[$scope.index];

        $scope.changeColour = function changeColour(_index){
            $scope.index = _index
            $scope.selected = $scope.colours[$scope.index];
        }

Answer 1

您不能在 ng-repeat 范围之外访问 $index。它将是不确定的。而是使用您的控制器范围变量索引。

    <div class="arrow left small" ng-click="changeColour(index-1)" ng-src="{{colour.thumbMedia | smcmediaurl}}"></div>
    <div class="arrow right small" ng-click="changeColour(index+1)" ng-src="{{colour.thumbMedia | smcmediaurl}}"></div>

通过单击按钮更改 ng-repeat 中 $index 选择的 class

Changing class on $index selection in ng-repeat with button click

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-click