фильтровать данные по именам классов в angularjs

Question

Я использую angularjs, и вот мое мнение:

<div style="width:70px;">
                               Show Online <input type="checkbox" ng-model="showonline" />
                            </div>

<div ng-repeat="user in users|filter:showonline">
<span type="button" class="{(isOnline()) ? 'available' : 'unavailable'}">user.id</span>
</div>

приведенный выше код будет генерировать html, подобный этому, внутри div, содержащего ng-repeat:

<span type="button" class="available">111</span>
<span type="button" class="available">121</span>
<span type="button" class="unavailable">88</span>
<span type="button" class="available">878</span>

классыназначается в соответствии с онлайн-статусом пользователя.по умолчанию вышеприведенный код отображает все элементы, имеющие класс, доступный и недоступный.Я хочу использовать флажок в качестве фильтра, который будет отображать на основе имени класса (если флажок установлен, отображается с доступным именем класса, который будет отображать только онлайн-пользователей).И когда я снимаю флажок фильтра, должны отображаться все доступные и недоступные классы.Я знаю, как фильтровать данные в angularjs, но я не знаю, как фильтровать данные по имени класса, используя флажок.Как мне это сделать?

Answer 1

Вы можете добавить еще одну переменную showAvailable в область видимости, чтобы показать доступных пользователей.Кроме того, я добавил еще один параметр в объект isOnline, который следует добавить, потому что вам не нужно проверять снова и снова.

Вот проверка, которую я добавил в HTML: ng-show="!showAvailable || user.isOnline"

Демо:

function TodoCrtl($scope) {

  $scope.users = [{
    userid: 1,
    isOnline: true
  }, {
    userid: 2,
    isOnline: false
  }, {
    userid: 3,
    isOnline: true
  }]
  this.name = "AngularJS";
  $scope.showAvailable = false;

}

h1,
p {
  font-family: Lato;
}

.available {
  background-color: green;
  width: 100px;
  height: 100px;
}

.unavailable {
  background-color: red;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<div ng-app>
  <div ng-controller="TodoCrtl">
    <div ng-repeat="user in users|filter:showonline">
      <span type="button" ng-show="!showAvailable || user.isOnline" ng-class="user.isOnline ? 'available' : 'unavailable'">{{user.userid +' '+ (user.isOnline ? 'available' : 'unavailable')}}</span>
    </div>
    Show Available only: <input type="checkbox" ng-model="showAvailable" />
    
  </div>
</div>