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

【问题标题】：Attach and Remove a CSS class using ngClass in Angular JS在 Angular JS 中使用 ngClass 附加和删除 CSS 类
【发布时间】：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可以吗？

截图

【问题讨论】：

标签： javascript css angularjs 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>

【讨论】：