チェックボックスの配列のチェックボックス要素を表示

Question

私はラジオボタンのセットとチェックボックスの配列を持っています。私はradiobutton1をクリックすると、配列から最初のチェックボックス要素を読み込む必要があります。radiobutton2をクリックすると、残りの3つのチェックボックス要素がarray.Butから読み込まれます。両方の場合に4つのチェックボックスがすべて表示されます。私はこのようにしてみました。コントローラ

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

と使用NG-ショー

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

Answer 2

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

で

あなたはangularJSであなたのフィルタを登録する必要があります。例えば

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

    return output; 

    } 

次に、HTMLでフィルタを使用できます。 また、フィルタは入力を取得し、フィルタ処理された出力を返す必要があります。私はそれに与えられた入力に関係なく厳密な出力を返すほうが意味がないと思う。

例えば、こちらをご覧ください： https://scotch.io/tutorials/building-custom-angularjs-filters