показать флажки элементов массива флажков

Question

У меня есть набор радиообъективов и массив флажков. Когда я нажимаю radobutton1, он должен сначала загрузить элемент флажка из массива, и когда я нажму на radobutton2, он должен загрузить оставшиеся 3 элемента флажка из массива. Но он показывает все 4 флажка в обоих случаях. Я так пробовал.

В HTML

<form> 
    <label class="radio-inline" > 
    <input value="1" type="radio" ng-model="radioption" >RB1</label> 
    <label class="radio-inline"> 
    <input value="2" type="radio" ng-model="radioption" >RB2</label> 

    <div class=""> 
    <label ng-repeat="channel in channels | filter:myFilter" > 
    <input type="checkbox" name="selectedChannels[]" value="{{channel.value}}" 
       ng-model="channel.selected" >{{channel.name}} 
    </label></div> 
    </form> 

В контроллере

App.controller('ReportController', ['$scope', 'Report', function($scope, Report){ 
      var self = this; 
$scope.channels = [{ name: 'A', selected: false, value: '1',visible:false }, 
        { name: 'B', selected: false, value: '2' ,visible:false}, 
        { name: 'C', selected: false, value: '3' ,visible:false}, 
        { name: 'D', selected: false, value: '4' ,visible:false} 
        ]; 
    $scope.selection = []; 

     $scope.selectedChannels = function selectedChannels() { 
     return Report($scope.channels, { selected: true }); 
     }; 

     $scope.$watch('channels|filter:{selected:true}', function (new) { 
     $scope.selection = new.map(function (channel) { 
       return channel.value; 
      }); 
      }, true); 

     $scope.myFilter = function(){ 

     if ($scope.radioption == '1'){ 

       return $scope.channels[0].visible = true; 
     } 
    else if ($scope.radioption == '2'){ 

       return [$scope.channels[1],{ visible: true }, 
         $scope.channels[2],{ visible: true }, 
         $scope.channels[3],{ visible: true }]; 
     } 
     }); 
}]); 

Answer 1

Я думаю, вы должны подойти к этой проблеме по-разному, но если вы хотите использовать фильтр попробовать этот

$scope.myFilter = function (channel) { 
    if ($scope.radioption == 1) { 
     if (channel.name == 'A') { 
      return true; 
     } 
     else { 
      return false; 
     } 
    } 
    else if ($scope.radioption == 2) { 

     if (channel.name == 'A') { 
      return false; 
     } 
     else { 
      return true; 
     } 
    } 
    else { 
     return false; 
    } 
} 

или вы можете добавить столбец radioption в каналы массива

$scope.channels = [{ name: 'A', selected: false, value: '1', radioption: 1 }, 
      { name: 'B', selected: false, value: '2', radioption: 2 }, 
      { name: 'C', selected: false, value: '3', radioption: 2 }, 
      { name: 'D', selected: false, value: '4', radioption: 2 } 
]; 

и использование нг-шоу

<input type="checkbox" ng-show="channel.radioption == radioption" name="selectedChannels[]" value="{{channel.value}}" 
    ng-model="channel.selected">{{channel.name}} 

Answer 2

Вы должны зарегистрировать свой фильтр с angularJS. например

app.filter('myFilter', function() { 
    return function(input) { 
    var output; 
    // Do filter work here 

    return output; 

    } 

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

Посмотрите здесь, например: https://scotch.io/tutorials/building-custom-angularjs-filters