Как переключить текущий «активный» класс div и удалить «активный» класс родственных элементов в ng-repeat

Question

У меня следующий код.Я хочу переключить класс 'active' текущего div, когда он нажал , и удалить 'active' класс дочерних элементов div.Я использовал ng-repeat

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

Контроллер

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

Answer 1

Этого можно добиться с помощью директивы 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