通过单击按钮在 ng-repeat 中更改 $index 选择的类答案

【问题标题】：Changing class on $index selection in ng-repeat with button click通过单击按钮在 ng-repeat 中更改 $index 选择的类
【发布时间】：2017-03-23 21:27:05
【问题描述】：

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

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];
        }

【问题讨论】：

你可以为你的问题添加一个有效的小提琴吗？

标签： javascript angularjs angularjs-ng-repeat angularjs-ng-click

【解决方案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>

【讨论】：