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

Question

我正在使用 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>

现在我只想在选择特定行时应用 class blue_act。我不想在控制器中写任何函数来实现这个。

例如，当我单击 Demo#16 时，只有该行具有 蓝色背景 。当我单击 e2Spark 时，只有该行会使用蓝色突出显示。只有 ng-click 和 ng-class 有可能吗？

截图

Answer 1

用这个 ng-click="getMessages(room.id); reset(); room.active = true; " 替换您的 click 事件对 ng-class 做同样的事情，就像 ng-class="{'normal-font': room.active}"

如果您希望一次 select 单行，请在您的代码中添加 reset function 下方。

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

Answer 2

在你的 ng-click 中

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

在你的 ng-class

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

Answer 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>

Answer 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 class

Attach and Remove a CSS class using ngClass in Angular JS

javascript

css

angularjs

ng-class