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>

上面的代码将在包含ng-repeat的div中生成这样的html：

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

根据angularjs中的类名称过滤数据

1 个答案: