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>

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

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

截图

Answer 1

将click事件替换为此ng-click="getMessages(room.id); reset(); room.active = true; " 并对ng-class使用的ng-class="{'normal-font': room.active}"执行相同的操作，例如reset function

如果您希望一次选择单行，请在代码中添加$scope.reset= function(){ angular.forEach($scope.rooms, function(room) { room.active=false; }); }。

$string = "Best event in town is: [LOC=LONDON]Party London[/LOC] (more text...) [LOC=PARIS]Paris Party[/LOC] Check it out!";
$location = 'LONDON';

$output = preg_replace_callback(
    '#\[LOC=([^\]]*)\](.*?)\[/LOC\]#',
    function (array $matches) use ($location) {
        if ($matches[1] === $location) {
            return $matches[2];
        } else {
            return '';
        }
    },
    $string
);

Answer 2

点击

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类

4 个答案: