Javascript 在Angular JS中使用ngClass附加和删除CSS类

我正在使用Angular JS构建一个应用程序。我正在使用

ng repeat

循环查看项目列表。我的代码如下所示

<div class="names" ng-repeat="room in rooms" ng-click="getMessages(room.id); active = true; " ng-class="{'blue_act': active}">

    <div class="con_cir col-lg-2 col-md-2 col-sm-2">
        <div class="grey_cir">
            <div class="wht_cir">
                <div class="circle1">
                    <div class="cir_txt">{{room.title | nameInitials}}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="em_info col-lg-10 col-md-10 col-sm-10">

        <div class="em_pr">
            <div class="name boldfnt col-lg-7 col-md-7 col-sm-7" ng-class="{'normal-font': active}">
                {{room.title}}
            </div>
            <div class="date col-lg-5 col-md-5 col-sm-5">
                {{room.lastActivity | date: 'd/M/yyyy'}}
            </div>
        </div>

        <div class="subject boldfnt col-lg-12 col-md-12 col-sm-12">
            Here is your copy of your coupans.
        </div>

    </div>
</div>

{{room.title |姓名首字母}}
{{room.title}
{{room.lastActivity}日期：'d/M/yyyy'}
这是您的coupans副本。

现在我只想在选中特定行时应用类

blue\u act

。我不想在控制器中编写任何函数来实现这一点

例如，当我单击

Demo#16

时，只有该行具有蓝色背景。当我单击

e2Spark

时，只有该行将使用蓝色突出显示。仅使用

ng单击

和

ng类

是否可能

屏幕截图

---

用此

ng click=“getMessages（room.id）；reset（）；room.active=true；”替换您的
单击事件
并对使用类似于
ng class=“{'normal-font'：room.active}”的
ng class执行相同操作

如果要一次选择一行，请在代码中添加以下
重置功能

$scope.reset= function(){
   angular.forEach($scope.rooms, function(room) {
   room.active=false;
   });
}

用此
ng click=“getMessages（room.id）；reset（）；room.active=true；”替换您的
click
事件
并对使用类似于
ng class=“{'normal-font'：room.active}”的
ng class执行相同操作

如果要一次选择一行，请在代码中添加以下
重置功能

$scope.reset= function(){
   angular.forEach($scope.rooms, function(room) {
   room.active=false;
   });
}

在您的ng中单击

ng-click="getMessages(room.id); room.active = !room.active;"

在你的课堂上

ng-class="{'normal-font': room.active }"

在您的ng中单击

ng-click="getMessages(room.id); room.active = !room.active;"

在你的课堂上

ng-class="{'normal-font': room.active }"

在控制器的作用域上创建一个名为“selectedRow”的新属性，并在单击时为其指定房间名称



var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（）{
这个房间=[
{name:'room1'}，
{name:'room2'}，
{name:'room3'}，
];
this.selectedRow=this.rooms[0]。名称；
});
.blue\u法案{
背景颜色：蓝色；
}

所选行：{main.selectedRow}
{{room.name}
在控制器的作用域上创建一个名为“selectedRow”的新属性，并在单击时为其指定房间名称



var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（）{
这个房间=[
{name:'room1'}，
{name:'room2'}，
{name:'room3'}，
];
this.selectedRow=this.rooms[0]。名称；
});
.blue\u法案{
背景颜色：蓝色；
}

所选行：{main.selectedRow}
{{room.name}
没有您可以使用的控制器功能

<div class="names" ng-repeat="room in rooms" ng-click="getMessages(room.id);room.active=!room.active;" ng-class="{'blue_act': room.active}">
...
</div>


...

或者，如果您只想同时激活一个，那么这应该可以：

<div class="names" ng-repeat="room in rooms" ng-click="getMessages(room.id);selectedRoom=room.id;" ng-class="{'blue_act': selectedRoom===room.id}">
...
</div>


...
没有您可以使用的控制器功能

<div class="names" ng-repeat="room in rooms" ng-click="getMessages(room.id);room.active=!room.active;" ng-class="{'blue_act': room.active}">
...
</div>


...

或者，如果您只想同时激活一个，那么这应该可以：

<div class="names" ng-repeat="room in rooms" ng-click="getMessages(room.id);selectedRoom=room.id;" ng-class="{'blue_act': selectedRoom===room.id}">
...
</div>


...
是。这是有效的。谢谢但是为什么要使用
MainCtrl作为main
。我只想知道为什么要将代码更新为不使用$scope，并使用“controller as”语法。请参见此链接了解此方法的好处：是。这是有效的。谢谢但是为什么要使用
MainCtrl作为main
。我只想知道为什么要将代码更新为不使用$scope，并使用“controller as”语法。有关此方法的好处，请参见此链接：