Kontrollkästchen Elemente eines Arrays von Kontrollkästchen anzeigen

Question

Ich habe eine Reihe von Radiobuttons und eine Reihe von Kontrollkästchen. Wenn ich auf radiobutton1 klicke, sollte es das erste Checkbox-Element aus dem Array laden und wenn ich auf radiobutton2 klicke, sollte es die restlichen 3 Checkbox-Elemente aus dem Array laden. Aber es zeigt alle 4 Checkboxen in beiden Fällen. Ich habe es so versucht.

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

Kontroller

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

Ich denke, dieses Problem anders angehen sollte, aber wenn Sie diese

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

ein Filter versuchen verwenden möchten oder Sie können radioption Spalte hinzufügen Kanäle Array

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

und Verwendung ng-show

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

Answer 2

Sie benötigen Filter mit AngularJS registrieren. z.B.

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

    return output; 

    } 

Dann können Sie Ihren Filter im HTML verwenden. Auch - Filter sollte Eingang erhalten und eine gefilterte Ausgabe zurückgeben. Ich denke, dass es weniger Sinn macht, eine strikte Ausgabe zurückzugeben, ungeachtet der Eingabe, die ihr gegeben wird.

Werfen Sie einen Blick hier, zum Beispiel: https://scotch.io/tutorials/building-custom-angularjs-filters