Question

我有一组radiobuttons和一系列复选框。当我点击radiobutton1时，它应该加载数组中的第一个复选框元素，当我点击radiobutton2时，它应该从数组中加载剩余的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

您需要使用angularJS注册过滤器。 e.g。

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

    return output;

  }

然后您可以在HTML中使用过滤器。此外 - 过滤器应获得输入并返回过滤后的输出。我认为无论给出什么输入，返回严格的输出都没那么有意义。

看看这里，例如： https://scotch.io/tutorials/building-custom-angularjs-filters

Answer 2

我认为你应该以不同的方式解决这个问题，但是如果你想使用过滤器试试这个

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

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

显示复选框数组的复选框元素

2 个答案: