在angularjs中，将复选框和单选按钮分组

Question

因为我是angularjs的新手，因此在angularjs中询问这种UI设计的方法。我有两个单选按钮，每个单选按钮都有相应的容器UI，其中有3个复选框。

我已附上截图供参考。

当我点击水果时，只有水果复选框应该是可见的，当我点击蔬菜时，只有蔬菜复选框应该是可见的。

我不确定它是如何开始的..使用表格或其他东西。 小样本代码对我来说没问题

由于

Answer 1

您可以在显示列表时使用ng-repeat中的过滤器：

<div ng-app>
  <div ng-controller="TodoCtrl">
    <div class="radioGroup">
      <input type="radio" name="option" ng-model="selectedOption" value="Fruit"/>Fruit 
      <input type="radio" name="option" ng-model="selectedOption" value="Vegetable"/>Vegetable
    </div>

    <div class="checkboxgroup">
      <div class="list" ng-repeat="obj in checkboxlist | filter: {category: selectedOption}">
        <input type="checkbox" ng-model="obj.selected"/> 
        {{obj.name}}
      </div>
    </div>
  </div>
</div>

function TodoCtrl($scope) {
    $scope.selectedOption = "Fruit";
  $scope.checkboxlist = [
    {name: 'Tomato', category: 'Vegetable'},
    {name: 'Potato', category: 'Vegetable'},
    {name: 'Onion', category: 'Vegetable'},
    {name: 'Apple', category: 'Fruit'},
    {name: 'Orange', category: 'Fruit'},
    {name: 'Mango', category: 'Fruit'}
  ]
}

您可以查看演示here。