在 Angular JS 中使用 ngClass 附加和删除 CSS 类
Posted
技术标签:
【中文标题】在 Angular JS 中使用 ngClass 附加和删除 CSS 类【英文标题】：Attach and Remove a CSS class using ngClass in Angular JS 【发布时间】：2017-12-16 16:20:36 【问题描述】：我正在使用 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>
现在我想仅在选择特定行时应用 blue_act 类。我不想在控制器中编写任何函数来实现这一点。
例如，当我点击Demo#16 时，只有该行会有蓝色背景。当我单击e2Spark 时，只有该行将使用蓝色 突出显示。只有ng-click和ng-class可以吗？
截图
【问题讨论】：
【参考方案1】：用这个ng-click="getMessages(room.id); reset(); room.active = true; " 替换你的click 事件
并对您使用的ng-class 执行相同操作，就像ng-class="'normal-font': room.active" 一样
如果您想一次选择单行，请在代码中添加 reset function 下方。
$scope.reset= function()
angular.forEach($scope.rooms, function(room)
room.active=false;
);
【讨论】：
【参考方案2】：在你的 ng-click 中
ng-click="getMessages(room.id); room.active = !room.active;"
在你的 ng-class 中
ng-class="'normal-font': room.active "
【讨论】：
【参考方案3】：在控制器的范围内创建一个名为“selectedRow”的新属性，并在单击时为其分配房间名称。
plnkr
var app = angular.module('plunker', []);
app.controller('MainCtrl', function()
this.rooms = [
name: 'room1',
name: 'room2',
name: 'room3',
];
this.selectedRow = this.rooms[0].name;
);.blue_act
background-color: blue;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl as main">
selected row: main.selectedRow
<div class="names" ng-repeat="room in main.rooms" ng-click="main.selectedRow = room.name" ng-class="'blue_act': main.selectedRow == room.name">
<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.name </div>
</div>
</div>
</div>
</div>
</div>
</body>【讨论】：
是的。这是有效的。谢谢。但是为什么你使用MainCtrl as main。我只想知道原因
将代码更新为不使用 $scope，并使用 'controller as' 语法。请参阅此链接以了解此方法的好处：docs.angularjs.org/api/ng/directive/ngController#example【参考方案4】：
没有控制器功能你可以使用
<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>
【讨论】：
以上是关于在 Angular JS 中使用 ngClass 附加和删除 CSS 类的主要内容，如果未能解决你的问题，请参考以下文章
Angular 4 - 在 jquery append 中编译 [ngClass]
我可以在 [ngClass] 中使用条件（三元）运算符以及 Angular2 中的多个类条件吗？
Angular 5：使用 ngClass 切换移动和桌面视图的类