Question

抱歉，如果之前已经解决了这个问题，但我找不到它。

我正在尝试根据单选按钮上的选择对ng-repeat进行排序，但我根本无法想象如何隐藏和显示ng-repeat中的项目。

一个例子：

HTML：

<form>
 <label><input type="radio" name="generic" />all</label>
 <label><input type="radio" name="generic" />offline</label>
</form>

<div ng-repeat="channel in controller.channelArray>
 <div>{{channel.name}}</div>
</div>

的javascript：

channelArray = [];
pushStreams();

function pushStreams(data) {
 channelArray.push(data)
}

现在，这只是一个示例，我还没有测试过这段代码，但它可以在我的真实代码中运行。我只是想知道，假设数据包含一个false为true的状态变量，如何显示所有（false和true）以及如果我选择离线单选按钮时如何过滤掉trues。

希望这很清楚，谢谢！

Answer 1

为此，您可以使用ng-if指令。

ng-if指令删除或重新创建DOM树的一部分基于{expression}。

<div ng-repeat="channel in channels">
     <div ng-if="validate(channel)">{{channel.name}}</div>
</div>

＆＃13;

function TodoCtrl($scope) {
   $scope.check='All';
   $scope.channels=[{
     name:'a',
     status:true
   },{
     name:'b',
     status:false
   },{
     name:'c',
     status:false
   },{
      name:'d',
     status:true
   }];
   
   $scope.validate=function(channel){
      switch($scope.check){
        case 'All':
           return true;
        case 'Offline':
           return !channel.status;
        case 'Online':
           return channel.status;
      }
   }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl"> 
     <label><input type="radio" name="generic" ng-model="check" value="All" />all</label>
     <label><input type="radio" name="generic" ng-model="check" value="Offline" />offline</label>
     <label><input type="radio" name="generic" ng-model="check" value="Online" />online</label>
    <div ng-repeat="channel in channels">
         <div ng-if="validate(channel)">{{channel.name}}</div>
     </div>
  </div>
</div>

＆＃13;

Answer 2

首先，您需要将ng-model指令和value属性添加到单选按钮。该值将存储在main.selectedFilter变量中（以后可以在过滤器中使用）。

HTML：

  <body ng-controller="MainCtrl as main">
    <form>
     <label><input type="radio" name="generic" ng-model="main.selectedFilter" value="All" />all</label>
     <label><input type="radio" name="generic" ng-model="main.selectedFilter" value="Offline" />Offline</label>
    </form>

    <div ng-repeat="channel in main.channelArray | filter : main.myFilterFunction ">
      <div>{{ channel.name }}</div>
    </div>
  </body>

JS：

app.controller('MainCtrl', function($scope) {

  var vm = this;

  vm.selectedFilter = "All";

  vm.channelArray = [
    {
      name:'Channel One',
      status:true
    },
    {
      name:'Channel Two',
      status:true
    },
    {
      name:'Channel Three',
      status:false
    },
    {
      name:'Channel Four',
      status:true
    }
 ];

  vm.myFilterFunction = function(value){
    return (vm.selectedFilter === "All") || (!value.status);
  }

});

Example Plunk

Answer 3

<form>
<label><input type="radio" name="generic" ng-model="all" checked />all</label>
<label><input type="radio" name="generic" ng-model="offline" />offline</label>
</form>

<div ng-if="all" ng-repeat="channel in controller.channelArray">
<div>{{channel.name}}</div>
</div>

<div ng-if="offline" ng-repeat="channel in controller.channelArray | filter :{status:true}">
<div>{{channel.name}}</div>
</div>

你可以使用过滤器，如果所有意味着第一个div将显示，如果你点击离线意味着第二个div将显示状态为true如果你想改变状态，改变过滤器值也

如何根据真假条件过滤ng-repeat数据

3 个答案: