Как фильтровать ng-repeat данные на основе истинного ложного условия

извините, если это было разрешено ранее, но я не могу найти для него asnwer.Как фильтровать ng-repeat данные на основе истинного ложного условия

Я пытаюсь сортировать 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) 
}

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

Надеюсь, что это достаточно ясно, спасибо!

источник

2017-02-21 MC Mowgli

–

Для этого вы можете использовать директиву ng-if.

Директива ng-if удаляет или воссоздает часть дерева DOM на основе выражения {expression}.

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

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

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

источник

2017-02-21 10:20:48

Спасибо за быстрый ответ. Ах да, но это, похоже, направляет данные напрямую. Я хочу показать/скрыть, основываясь на выборе переключателей, или я что-то не понял? –

Ok..i обновится через несколько мгновений. –

@MCMowgli, пожалуйста, взгляните на мой ответ. –

<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 будет отображаться для status true, если вы хотите изменить статус, изменить значение фильтра также

источник

2017-02-21 10:32:26

Сначала вы уронили d добавить 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

источник

2017-02-21 10:57:03

Как фильтровать ng-repeat данные на основе истинного ложного условия

ответ

Смежные вопросы