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

我有一组单选按钮和一组复选框。当我点击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 }]; 
     } 
     }); 
}]);

来源

2016-11-10 user3844782

为什么你使用过滤器而不是指令ng-show或ng-hide？ – karman

对于普通的复选框，我知道如何使用ng-show。对于数组我不知道如何使用它。我是angularjs的新手。 – user3844782

我想你应该不同处理这个问题，但如果你想使用的过滤器试试这个

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

来源

2016-11-10 13:44:09 NTP

请让我看看没有过滤器。 – user3844782

看起来很容易。感谢更新。 – user3844782

您需要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

来源

2016-11-10 13:38:10

感谢您的链接。我将尝试通过以下示例进行更改。 – user3844782

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

回答

相关问题