时间戳

首页 > 解决方案 > 如何在 ng-repeat 中切换当前的“活动”类 div 并删除兄弟 div 的“活动”类

html - 如何在 ng-repeat 中切换当前的“活动”类 div 并删除兄弟 div 的“活动”类

问题描述

我有以下代码。我想在单击时切换当前 div的“活动”类并删除同级 div 的“活动”类。我用了 ng-repeat

<div class="" ng-repeat="data in people">
<p>{{data.name}}</p>
</div>

控制器

$scope.people=[{
"name" : "john snow"
},
{
"name" : "daenerys"
}]

标签： htmlangularjs

解决方案

ng-class您可以使用该指令实现此目的。

您需要跟踪最后一个selected值的索引并使用 更新该selected值setActive()。setActive()单击时从您的 HTML调用并传递对象的索引。

这是一个工作片段 

var app = angular.module("app", []);

app.controller("myCtrl", ["$scope", ($scope) => {
  $scope.people=[{
    "name" : "john snow"
  },
  {
    "name" : "daenerys"
  },
  {
    "name": "stark"
  }];
  
  $scope.selected = null;

  $scope.toggleStatus = (index) => {
      $scope.selected = $scope.selected !== index ? index : null;
  }
}]);
.active {
  background-color: yellow;
  // enter active class css here
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="app" ng-controller="myCtrl">
  <div ng-repeat="data in people">
      <p ng-class="{active: selected === $index}" ng-click="toggleStatus($index)">
        {{data.name}}
      </p>
  </div>
</div>

在此处查看文档以ngClass获取更多信息：https ://docs.angularjs.org/api/ng/directive/ngClass

推荐阅读