Question

我有一些数据，我使用ng-repeat

绑定了anchor标签中的数据

<table style="width: 60%">
                <tr>
                    <td style="text-align: center" ng-repeat="displayyears in displayYears">
                        <div>
                            <a href="javascript:void(0)" style="padding: 30px,30px,30px,30px; font-size: 18px" ng-class="StyleOfYear" ng-click="selectedYear(displayyears,this)">{{displayyears}}</a>
                        </div>
                    </td>
                </tr>
            </table>

这是我的css代码

<style>
    .slectedYear {
        background-color: red;
    }

    .loadYear {
        background-color: none;
    }
</style>

现在我要更改选定的锚标记背景颜色。我试过以下代码。

Js代码

//Controller 
 $scope.StyleOfYear = "loadYear";
  $scope.selectedYear = function (value, context) {
            context.$parent.StyleOfYear = "slectedYear";
            $scope.selectedYearValue = value;
        }

但是我错了，因为我的代码有助于更改所有锚标记的背景颜色，但我想更改选定的锚标记背景颜色。

现在我的代码在点击2015时选择所有锚标签 enter image description here

但是如果我点击2015，我只想更改2015锚标记的背景颜色。所有其他锚标记的bg颜色应该是非颜色。

如下图所示

enter image description here

只是尝试更改活动菜单概念的颜色，但我不知道如何处理ng-repeat

Answer 1

改变方法可能会更好。多年来使用服务，并添加一个＆＃39;选择＆＃39;属性为您返回的年份对象。

然后使用ng-repeat迭代这些对象，并根据该属性的值显示ng-repeat中每个项目的颜色。

然后，您的selectedYear方法可以在服务中生效，只需切换哪个对象设置了selected=true即可。数据绑定将负责其余部分。

根据您的代码的语法和结构，有很多方法可以执行此操作，但以下内容可能有效（未经测试）：

var module = angular.module('myapp', []);

module.service('yearService', function(){
    this.years = [
        { 'display': '2012', 'selected': false },
        { 'display': '2013', 'selected': false },
        { 'display': '2014', 'selected': false },
        { 'display': '2015', 'selected': true },
        { 'display': '2016', 'selected': false },
        { 'display': '2017', 'selected': false },
        { 'display': '2018', 'selected': false }
    ];
    this.selectYear = function selectYear(year) {
        // iterate through the years and set only the 
        // selected one to true, others to false
    };
});

确保将服务注入控制器，并将其分配到范围（例如，yearService和

<table style="width: 60%">
    <tr>
        <td style="text-align: center" ng-repeat="year in yearService.years">
            <div>
                <a href="#" class="year" ng-class="{year.selected: slectedYear}" ng-click="yearService.selectYear(year)">{{year.display}}</a>
            </div>
        </td>
    </tr>
</table>

注意我已假设.year的基本CSS类而不是style标记，但使用了现有的.slectedYear类。

您的HTML也可以重写 - 请摆脱桌面！

编辑：我忘了添加动态类 - 现在已添加。

Answer 2

我是从@Sam获得的

我使用了ng-class的条件

html更改

 <a href="javascript:void(0)" style="padding: 30px,30px,30px,30px; 
 font-size: 18px" **ng-class="{slectedYear: displayyears==selectedYearValue}"** 
 ng-click="selectedYear(displayyears,this)">{{displayyears}}</a>

风格

<style>
    .slectedYear {
        background-color: red;
    }

    .loadYear {
        background-color: none;
    }
</style>

Js代码

$scope.selectedYear = function (value, context) {
            $scope.selectedYearValue = value;
        }

如果显示与所选年份相等的年份，则完成条件，然后指定slectedYear类

解决方案： -

以下代码解决了我的问题

ng-class="{slectedYear: displayyears==selectedYearValue}

谢谢..

突出显示Angularjs中选定的锚标记（使用ng-repeat）

2 个答案:

解决方案： -